5

我有多个div标签：

存放内容的 main 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 获得了高度，但其他人没有。有任何想法吗？

4

4 回答 4

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%
}
于 2012-12-19T15:33:19.960 回答
0

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

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/

于 2012-12-19T15:34:46.827 回答
0

这可以使用 jQuery 来完成，如下所示：

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

这可能不是最好的方法，但它应该工作:)

于 2012-12-19T15:29:24.547 回答
0

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

<div id="container">
 <div id="first">
  <div id="second">
 <!-- content as before -->
  </div>
 </div>
</div>
于 2012-12-19T15:29:33.420 回答