0

次のような HTML 構造があります。

<div id="pagewrap">

    <div id="header">
    </div>

    <div id="content">

     <div id="left"></div>
     <div id="right"></div>

     </div>
<div id="footer"></div>
</div>

コンテンツ div のいずれかの div が他の div と同じサイズになると、コンテンツ div のサイズを大きくしたいと考えています。

どうすればこれを達成できますか？

これが私のcssの方法です：

  #pagewrap
    {
     width: 100%;
     height: 100%;
    }

    #header{width: 100%;height:97px;position:relative;}

    #left{position:absolute;left:0px;width:20%;background-color:#1C2326;}

    #right{position:absolute;right:0px;width:80%;background-color:#2D3538;color:#fff;}

    #footer{clear:both;height: 80px;background-color:#72D27C;}
4

2 に答える 2

1

position: absoluteラッパーがコンテンツのサイズの影響を受けるようにする場合は、内側の divでは使用できません。代わりにそれらをフローティングしてみてください（overflow: hiddenコンテナに追加して内側のフロートをクリアしてください）：

#pagewrap { width: 100%; height: 100%; }
#content { overflow: hidden; }
#header { width: 100%; height: 97px; position:relative; }
#left { float: left; width: 20%; background-color: #1C2326; }
#right { float: left; width: 80%; background-color: #2D3538; color: #fff; }
#footer  { height: 80px; background-color: #72D27C; }

http://jsfiddle.net/h4hbx/

于 2013-10-04T18:01:35.870 に答える
0

おそらく、このフィドルはあなたが考えていたものに近いと思います。左の div (静的位置、フロートなし) でコンテンツの高さを設定し、右の div の上下をコンテンツ div に固定できます。左が成長するとコンテンツが成長し、右がコンテンツに結び付けられ、必要な効果が得られます。ただし、これは非対称です。どちらかの div が他の div に追従するようにしたい場合、それは別の問題です。

CSS:

html, body {
    height: 100%;
}
#pagewrap {
    width: 100%;
    height: 100%;
}
#content {
    position: relative;
}
#header {
    width: 100%;
    height:97px;
}
#left {
    left:0px;
    width:20%;
    background-color:#1C2326;
    color: #fff;
    top: 0;
}
#right {
    position:absolute;
    right:0px;
    width:80%;
    background-color:#2D3538;
    color:#fff;
    bottom: 0;
    top: 0;

}
#footer {
    clear:both;
    height: 80px;
    background-color:#72D27C;
}
于 2013-10-04T18:58:40.793 に答える