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。这样，如果您的内容短于声明的高度，则只会占用所需的空间。

没有高度的滚动条（以像素为单位）

1 个答案: