css - 固定元素的滚动子元素

我有一个高度为100％的固定div，并且在其中有一个相对定位的子div。 child-div保存可以更改的文本，因此它没有固定的高度。css - 固定元素的滚动子元素

我想让child-div垂直滚动，如果其内容溢出屏幕。我使用最小和最大高度属性来实现这一点，但它不是一个理想的解决方案，并且不总是工作。

编辑：最小和最大高度似乎被忽略，差不多。我计算了textBox将占用最小“允许”屏幕高度的垂直面积，并将其设置为高度。添加最小和最大高度对此没有影响。这个解决方案唯一的问题是该框是总是约60％，所以即使它不需要滚动，它也是如此。这有效，但并不理想。如果有办法解决这个问题，那就太好了。

这是我到目前为止有：

<div class="content"> 
    <div id="textbox"> some text 
    </div> 
</div> 

.content { position: fixed; height: 100%; top: 0px; right: 0px; } 

#textBox { 
    position: relative; 
    top: 165px; 
    height: 61.5%; 
    overflow-y: auto; 
}

是否有这样做的更好，更加万无一失的方法是什么？

来源

2012-04-14 sooks

你有没有尝试设置底部呢？ IE - 底部：5px; – Tyanna 2012-04-14 20:10:38

基本上你必须设置你的固定元素的溢出，你可以在this example看到，并且有一个jsfiddle玩的可能性。

来源

2012-04-14 20:09:14

但我不想固定的元素滚动。我想要孩子滚动，如果屏幕无法显示所有内容... – sooks 2012-04-14 20:20:17

我明白了。如果您创建三个div，将第二个设置为固定大小并且可滚动？ – 2012-04-16 00:35:13

下完美工作对我来说：

<style type="text/css"> 
    #fixed { 
     position: fixed; 
     top:  0; 
     bottom:  0; 
     left:  0; 
     right:  0; 
     border:  1px solid black; 
     overflow: hidden; 
     background: white; 
    } 

    #scrolling { 
     overflow: auto; 
     max-height: 98%; 
    } 
</style> 

<div id="fixed"> 
    <div contenteditable id="scrolling"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam 
     egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
     ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean 
     fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non 
     enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas 
     augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
     facilisis luctus, metus</p> 
    </div> 
</div>

div的内容是可编辑的，所以只需添加文字，直到它滚动。它会在体面的浏览器上工作。

Live Example

来源

2012-04-14 20:35:42

感谢您花时间回复。您的解决方案与我之前的解决方案有点类似，我猜测没有什么更好的方法可以做到。我为屏幕设定了一定的最小高度，并计算了文本框的百分比，并将其设置为高度属性（大约60％）。唯一的问题是，即使屏幕上有空间，这个盒子也只会占用大约60％的空间，并且可以滚动。 – sooks 2012-04-14 21:10:04

css - 固定元素的滚动子元素

回答

相关问题