Div与其他div的高度相同

Question

我有多个div代码：

保存内容的主div，如果内容变大，高度显然也会变大，但其他div则不会。

如何让其他div占据主div的高度？

代码

<div id="container">
    <span id="header">Fiction Tools</span>
    <span id="paragraph">Lots of text will be in this text box, 
    describing in great detail the awesomeness of Fiction Tools 
    and it’s capabilities. Fiction Tools is known for lots of 
    awesome things, here are a few:</span>
    <ul id="lists">
        <li>We have this awesome design made by Driptone.</li>
        <li>Did I mention, the design is awesome? Well, it is.</li>
        <li>You should be reading this in the voice of Morgan Freeman.</li>
        <li>In a galaxy, far, far away...</li>
    </ul>
    <span id="secondparagraph">Be sure to check out our latest 
    deals which can be found on our Twitter and Facebook profiles 
    for more updates! For any other updates, you can look at our 
    news feed to the right of your screen or tablet.</span>
    <br />
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS

#container {
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
}

#first{
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 3px;
    left: 3px; 
    z-index:-1;
}

#second{
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: -2;
}

#header {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    color: #404040;
    padding: 25px;
    top: 15px;
}

#paragraph {
    position: relative;
    font-size: 12px;
    color: #8f8f8f;
    padding-left: 25px;
    padding-top: 20px;
    display: block;
}

#secondparagraph {
    position: relative;
    font-size: 12px;
    color: #8f8f8f;
    padding-left: 25px;
    padding-top: 7px;
    display: block;
}

#lists {
    position: relative;
    padding-left: 25px;
    padding-top: 10px;
}

目前它看起来像这样：

正如您所看到的那样，保存内容的div获得了高度，但其他人却没有。 有什么想法吗？

Answer 1

您是否尝试将高度设为100％：

http://jsfiddle.net/egjUZ/

#first{
        border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 3px;
    left: 3px; 
    z-index:-1;
    height: 100%;
}
#second{
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index:-2;
    height: 100%
}

Answer 2

这可以使用jQuery来完成：

var articleHeight = $("#container").height();
$("#first").css({'height': +articleHeight});
$("#second").css({'height': +articleHeight});

这可能不是最佳方式，但它应该有效：）

Answer 3

如果您的主要目标是提供堆叠外观，那么您也可以将内容包装在“第一个”和“第二个”div中。

<div id="container">
 <div id="first">
  <div id="second">
 <!-- content as before -->
  </div>
 </div>
</div>

Answer 4

我的第一个解决方案很糟糕，按预期工作。

HTML

<div id="main">
    <span id="header">Fiction Tools</span>
    <span id="paragraph">Lots of text will be in this text box, describing in great detail the awesomeness of Fiction Tools and it’s capabilities. Fiction Tools is known for lots of awesome things, here are a few:</span>
    <ul id="lists">
        <li>We have this awesome design made by Driptone.</li>
        <li>Did I mention, the design is awesome? Well, it is.</li>
        <li>You should be reading this in the voice of Morgan Freeman.</li>
        <li>In a galaxy, far, far away...</li>
    </ul>
    <span id="secondparagraph">Be sure to check out our latest deals which can be found on our Twitter and Facebook profiles for more updates! For any other updates, you can look at our news feed to the right of your screen or tablet.</span>
    <br />
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS

#main div {
    height: 100%;
}

#main, #main div {
    background-color:white;
    border: 1px solid #aaa;
    min-height: 200px;
    position: absolute;
    width: 768px;
}

#main span {
    font-size: 12px;
    padding: 25px;
    position: relative;
}

#first{
    top: 3px;
    left: 3px;
    z-index:-1;
}

#second{
    top: 6px;
    left: 6px;
    z-index:-2;

}

#header {
    font-size: 24px;
    font-weight: bold;
    color: #404040;
    top: 15px;
}

#paragraph {
    font-size: 12px;
    color: #8f8f8f;
    padding-top: 20px;
    display: block;
}

#secondparagraph {
    color: #8f8f8f;
    padding-top: 7px;
    display: block;
}

#lists {
    position: relative;
    padding-left: 25px;
    padding-top: 10px;
}

JSfiddle http://jsfiddle.net/tpcAU/2/