0

私のラッパーdivは、その内容によって高さが拡張されていません。一方、ページのヘッダーdivとnav divによって展開されますが、別のdiv内にあるサイドバーによっては展開されません。HTMLは次のとおりです。 

<div id="wrapper">
    <div id="header">
    </div>
    <div id="nav">
        nav content goes here
    </div>
    <div id="pagecontent">
    <div id="sidebar">
        some sidebar stuff like login form
    </div>
    </div>
</div>

およびCSS（Webkitボックスシャドウとは異なり、必要なcssのみ）： 

#wrapper {
    width: 900px;
    margin: 0 auto;
    padding-bottom: 80px;
}
#header {
    height: 160px;
    width: 100%;
}
#nav {
    width: 100%;
    height: 40px;
}
#sidebar {
    float: right;
    width: 140px;
    height: 100%;
}
#pagecontent {
    width: 900px;
}

高さが100％のサイドバーは、ラッパーdivの外側にあり、 http：//craftersinn.netで確認できます。

4

5 に答える 5

2

overflow:hiddencssにcssルールを追加できません#wrapperでした。

于 2012-08-23T12:00:54.167 に答える
0

ここで同じ問題について説明しました。フロートソリューションのクリアとオーバーフローに関する説明を確認してください。

cssボックスモデルはパディングを使用してストレッチしません

于 2012-08-23T12:28:35.353 に答える
0

ラップされたCSSに追加overflow: hidden;し、セレクターが実際に要素を選択していることも確認します。

<div id="pagecontent">// remove page
#content {

http://jsfiddle.net/Kyle_Sevenoaks/bPT49/

于 2012-08-23T12:04:33.010 に答える
0

<div style="clear: both;"></div>後に追加

<div id="sidebar">
        some sidebar stuff like login form
    </div>
于 2012-08-23T12:05:36.767 に答える
0

フロートに関するこの記事、特に「フロートのクリア」のセクションを読む必要があります。

clear: bothつまり、、overflow: hiddenまたはclearfixメソッドを使用できます。幸運を！

于 2012-08-23T12:05:47.530 に答える