Question

<div id="div1">
    <div id="div2">
      // content set the height of div 2
    </div>
</div>

在重新调整浏览器大小时，我目前仍然坚持让我的子div可滚动。 div1将根据浏览器窗口高度调整大小。当浏览器重新调整大小时，div2会有一个滚动条（css属性溢出y） div2的高度。 div2没有固定的高度，其高度取决于它所拥有的内容。因此，如果浏览器窗口高度低于div2内容高度，则显示滚动条。

Answer 1

您可以像这样使用max-height：

html,body {
    height:100%;
}
#div1 {
    background:red;
    color:white;
    height:100%;
}
#div2 {
    background:black;
    max-height:100%;
    overflow-y:auto;
}

选中 Demo

Answer 2

谢谢denko ..演示，是我正在寻找的确切行为..尽管我的css反映了你的演示，我无法让它工作。这是我目前的css。

<div id="container">
 <div id="div1">
   <div id="div2">
  // content set the height of div 2
   </div>
</div>

//css styles

 #container{
 position:absolute;
 }

#div1    {
margin-right: 20px;
display: inline-block;
border-style: solid;
max-width: 700px;
min-width: 300px;
border-color: #999999;
border-width: 1px;
/* box-shadow: 0px 0px 1px rgb(109,109,110); */
/* float: left; */
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: relative;
height: 100%;
}

#div2      {

 color: #6e6e6e;
 font-family: arial;
 font-size: 14px;
 overflow-y: auto;
 /* height: 225px; */
 overflow-x: hidden;
 position: relative;
 min-height: 100%;

}

使用css调整浏览器窗口大小时如何制作子div滚动条

2 个答案: