使用css调整浏览器窗口大小时如何使子div可滚动答案

【问题标题】：How to make child div scrollable when re sizing browser window, using css使用css调整浏览器窗口大小时如何使子div可滚动
【发布时间】：2014-09-18 12:38:13
【问题描述】：

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

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

【问题讨论】：

使用max-height 100% ?

标签： html css

【解决方案1】：

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

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

检查一下Demo

【讨论】：

【解决方案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%;

}

【讨论】：