没有像素高度的滚动条

Question

这可能吗？我正在尝试制作一个响应式网站，并且可以毫无问题地在我的 div 上获得滚动条，但并非没有定义像素高度。我一直在尝试修改我的代码，但到目前为止我还没有任何运气。 https://jsfiddle.net/9z1e2ov7/3/

.containerMain {max-width: 950px; margin: 0 auto; width:90%; 
                position: relative; overflow:hidden; 
                padding-bottom:2em; padding-top:2em;} 

.TextLeft {float:left; width:55%; margin:0 auto; text-align:left; position:relative;}

.ImageRight{float:right; width:45%; height:100%;} 
.ImageRight img{width:100%;}

.headline {width:100%; float:left;}
.headline img {width:85%;}

.lineGreen {width:85%; padding-top:2.1%; clear:both; border-bottom: 2px solid #A1A865;}

.BodyText { padding-right:12.5%; width:87.5%; height:350px; overflow-y:scroll;}

CSS

<div class="containerMain">

<div class="TextLeft">

<div class="headline">
    <img src="http://www.mad-motion.com/blog/wp-content/uploads/2011/07/Bildschirmfoto-2011-07-21-um-15.51.11-435x469.jpg"/>
</div>

<div class="lineGreen"></div>
<div class="BodyText">
<p>Nam egestas, justo ac finibus tincidunt, arcu lacus pharetra est, eget dignissim nunc est non metus. Donec gravida sapien nec finibus sagittis. Fusce turpis elit, interdum ac pellentesque vel, rutrum non augue. Duis lectus libero, interdum sit amet nulla sit amet, lacinia ullamcorper arcu. Mauris ut ante ac urna elementum lobortis vitae sed eros. Donec condimentum pulvinar ante, lacinia eleifend magna luctus ac.
</p>

<p>Quisque feugiat accumsan enim id consequat. Morbi lectus nulla, mollis non nisl et, tincidunt luctus lacus. Integer non rutrum sapien. Quisque pellentesque nulla lacus, eget dapibus ante euismod nec. Proin vitae rutrum quam, non bibendum augue. Donec blandit sapien vitae urna condimentum pellentesque. Fusce at sodales libero.
</p>
</div>
</div>

 <div class="ImageRight">
 <img src="http://www.mad-motion.com/blog/wp-content/uploads/2011/07/Bildschirmfoto-2011-07-21-um-15.51.11-435x469.jpg"/>
 </div>

</div>
<div class="clearfix"></div>

Answer 1

基本上，不，你不能。在处理垂直溢出时，元素需要一种方法来知道在什么点切断内容并开始滚动条。否则，它只会拉伸以填充整个内容。

但是，您始终可以使用 max-height 而不是 height。这样，如果您的内容比您声明的高度短，它只会根据需要占用 space。

没有像素高度的滚动条

Scrollbar without a height in pixels

html

css

scrollbar

responsive-design