相對的div會採取的div容器的其餘

Question

說明：
我有有靈活widtih由JavaScript &高度多變的絕對位置的div容器。然後我有兩個孩子DIVS，可以改變身高，取決於他們內部的元素。 我需要這些div保持在parrent div內。

我的問題：
第二個div離開parrent DIV的高度，但我不希望這樣。我需要它在剩下的空間裏，用scrollbarll。

（我有項目的形象，但不能發佈呢。）

我：

<div id="parrent"> <!-- This div is flexible and can change height !--> 
    <div id="children_top"></div> <!-- This div is flexible and can change height !--> 
    <div id="children_bot"></div> <!-- I need this div to take rest of the height space,  needs to have scrolling if it's longer than rest space !--> 
</div> 

<style> 
#parrent { 
    position: absolute; 
    top: 0; left: 0; 
    height: 100%; 
} 
#children_top { 
    background-color: #7f8f9f; 
    color: white; 
    width: 100%; 
    display: inline-block; 
    margin: 0; 
    padding: 5px 0; 
    overflow: hidden; 
    text-align: left; 
    text-transform: uppercase; 
} 
#childner_bottom { 
    display: inline-block; 
    width: 100%; 
} 
</style> 

Answer 1

發送圖像通過稍微改變你的HTML結構：

<div id="parrent"> 
    <div class="table"> 
     <div id="children_top" class="row"> 
     </div> 
     <div id="children_bot" class="row"> 
      <div class="relative"> 
       <div class="scroll"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

您可以使用以下樣式：

body, html {height:100%; min-height:100%; padding:0; margin:0; position:relative;} 
#parrent { 
    position: absolute; 
    top: 0; left: 0; 
    bottom:0; right:0; 
} 
#children_top { 
    background-color: #7f8f9f; 
    color: white; 
    padding: 5px 0; 
    text-align: left; 
    text-transform: uppercase; 
    height:0px; 
} 
#children_bot { 
    width: 100%; height:100%; 
} 

.table {display:table; height:100%; width:100%; } 
.row {display: table-row; width:100%;} 
.relative {position:relative; height:100%;} 
.scroll {overflow:auto; position:absolute; top:0; left:0; right:0; bottom:0;} 

Example

Answer 2

是你whanted什麼？

<style> 
     #parrent { 
      position: absolute; 
      background: yellow; 
      top: 0; 
      left: 0; 
      right: 0; 
      height: 100%; 
     } 

     #container { 
      position: relative; 
      background: blue; 
      height: 100%; 
      width: 100%; 
     } 

     #children_top { 
      background: red; 
      width: 100%; 
      display: block; 
      overflow: hidden; 
      height: 50px; 
     } 

     #children_bot { 
      background: green; 
      display: block; 
      position: absolute; 
      top: 50px; 
      right: 0; 
      left: 0; 
      bottom: 0; 
     } 
</style> 



<div id="parrent"> 
    <div id="container"> 
     <div id="children_top"></div> 
     <div id="children_bot"></div> 
    </div> 
</div> 

並在最後添加此!!!

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $("#children_bot").css("top", $("#children_top").height() + "px"); 
    }); 
</script> 

如果我誤會了你，你可以在unixe@hotmail.com

Answer 3

，而不會對現有的標記和CSS的重大變化：

看到這個小提琴：http://jsfiddle.net/xqbb8/

而且這樣的：http://jsfiddle.net/xqbb8/1/

你要了div指定明確的高度和寬度，像這樣：

#parrent { 
    position: absolute; 
    top: 64px; left: 64px; 
    height: 60%; width: 60%; 
    background-color:red; 
} 
#children_top { 
    background-color: #7f8f9f; 
    color: white; 
    margin: 0; 
    padding: 5px 0; 
    height: 10%; 
    overflow: hidden; 
    text-align: left; 
    text-transform: uppercase; 
} 
#children_bot { 
    height: 90%; 
    background-color:blue; 
    overflow: auto; 
} 

Answer 4

給容器html高度的第一，那麼你必須another solution

CSS

html, body { 
    width:100%; 
} 
#parrent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%; 
    background-color: blue; 
    border:1px solid #000; 
} 
#children_top { 
    background-color: #7f8f9f; 
    color: white; 
    margin: 0; 
    padding: 5px 0; 
    overflow: hidden; 
    text-align: left; 
    text-transform: uppercase; 
} 
#childner_bottom { 
    background-color: grey; 
} 

HTML

<div id="parrent"> 
    <br/> 
    <div id="children_top">This is some text in top</div> 
    <div id="childner_bottom">This is some text in bottom</div> 
    <br /> 
</div>