5

複数の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は高さを取得しますが、他の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

これは、次のようにjQueryを使用して実行できます。

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

これはそれを行うのに最適な方法ではないかもしれませんが、うまくいくはずです:)

于 2012-12-19T15:29:24.547 に答える
0

これの主な目的が積み重ねられた外観を与えることである場合は、コンテンツを「最初の」および「2番目の」div内にラップすることもできます。

<div id="container">
 <div id="first">
  <div id="second">
 <!-- content as before -->
  </div>
 </div>
</div>
于 2012-12-19T15:29:33.420 に答える
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 に答える