Question

说明
我有一个绝对位置的div容器，具有灵活的widtih和高度可以通过javascript改变。然后我有两个孩子DIVS，可以改变身高，取决于他们内部的元素。我需要那些div保留在parrent div中。

我的问题：
第二个DIV正在离开DIV的高度，但我不希望如此。我需要它在滚动条的剩余空间。

（我有一个项目图片，但还不能发帖。）

我有：

<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

这就是你想要的吗？

<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>

如果我误解了您，您可以发送图片发送到unix@hotmail.com

Answer 2

稍微改变你的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 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>

相对div将占用div容器的其余部分

4 个答案: