auto height为一个html div自动滚动- div以保持高度。

i have a very simple but confusing problem what issue i am having is that i have some div. first div which is fixed to top right with height 100% and this div has 2 more div inside div2 and div3 both should be scrolled .

我有一个非常简单但令人困惑的问题我遇到的问题是，我有一些div，第一节固定在右上方，高度100%这个div在div2和div3里面还有2个div都应该滚动。

one the uper div2 varies height from 100px to 200px after that it should be scrolling and the div with id div3 should take the remaining height and should be scrolling if data is increased.

其中一个uper div2的高度从100px到200px，在此之后它应该是滚动的，而id div3的div应该占据剩余的高度，如果数据增加，则应该滚动。

i can achieve till div2 but the div3 is not taking the remaining height

我可以做到直到第2步，但是第3步并没有占据剩余的高度

my code is

我的代码是

    <div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
<div style="width:100%;min-height:100px;max-height:200px;background:blue;overflow:auto;float:left;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>
<div style="width:100%;height:300px;background:yellow;float:left;overflow:auto;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>

i need something which is browser friendly.. if you can suggest me something it would be very helpful..

我需要一些浏览器友好的东西。如果你能给我一些建议，那将会很有帮助。

this is demo http://www.reurl.in/f84acc961

这是演示http://www.reurl.in/f84acc961

https://jsfiddle.net/fy727tLL/

2 个解决方案

#1

Here is the updated fiddle: Fiddle

这是最新的小提琴:古提琴

<div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
  <div style="width:100%;height:20%;background:blue;overflow:auto;float:left;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
  <div style="width:100%;height:80%;background:yellow;float:left;overflow:auto;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
</div>

#2

The other option you can do is set div2 to a "fixed" height, and then set a margin above on div2 to the same height, then use an auto height. Here is a JSfiddle that does something very close to what you are doing, but it is a little more stylized and has fixed top divs:

另一个选项是将div2设置为“固定”高度，然后将div2上面的边距设置为相同高度，然后使用自动高度。这是一个JSfiddle，它做了一些非常接近你正在做的事情，但它更有风格化，并且有固定的顶部divs:

http://jsfiddle.net/e13wzxgb/1/

#div2 {
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#div3 {
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
height:auto;
margin-left:auto;
    margin-right: auto;
bottom: 0px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

Hope that helps ya out!

希望这能帮到你!

#1