css - CSS スタイリングレイアウトの問題

Question

Web ページの基本的なレイアウトに関していくつか問題があります。私が欲しいのは次のとおりです。ヘッダー、次に左側にメニューがあり、右側にコンテンツがあるページのコンテンツ、およびフッターです。このフッターは、コンテンツもメニューも 1 ページの長さを超えない場合、ページの下部に配置し、両方のコンテンツ div をヘッダーまで拡張する必要があります。コンテンツがページの長さを超えてスクロールバーが表示される場合、フッターはコンテンツの一番下にある必要があります。

私が現在持っているのは、このページを使用して同じ高さで、ヘッダーとコンテンツの 2 つの列です。現在、フッターはページの下部にありますが、コンテンツがページの長さを超えるとそこにとどまります。

現在のコードは次のとおりです。

CSS:

 html, body{
    margin:0px;
    height:100%;
}
#container{
    height:100%;
    width:1024px;
    margin:auto;
}
#header{
    width:100%;
    height:100px;
    background:purple;
}
#container2{
    float:left;
    width:1024px;
    background:yellow;
    overflow:hidden;
    position:relative;
}
#container1{
    float:left;
    width:1024px;
    background:red;
    position:relative;
    right:874px;
}
#col1{
    float:left;
    width:150px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#col2{
    float:left;
    width:874px;
    position:relative;
    left:874px;
    overflow:hidden;
}
#footer{
    width:1024px;
    background:purple;
    position:absolute;
    bottom:0px;
    height:30px;
}

html:

<body>
    <div id='container'>
        <div id='header'>
            This is the header.
        </div>
        <div id='container2'>
            <div id='container1'>
                <div id='col1'>
                    Menu option 1<br />
                    Menu option 2<br />
                    Menu option 3<br />
                    Menu option 4<br />
                    ...
                </div>
                <div id='col2'>
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!<br />
                    Content!
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </div>
</body>

そしてもちろん、ここにフィドルがあります：http://jsfiddle.net/gVEpx/

編集:完全に明確にするために、フッターは次のようにする必要があります: 1) コンテンツが小さい場合: ページの下部 (スクロールバーなし) 2) コンテンツが大きい場合: コンテンツの下部ページの一番下までスクロールすると、フッターが表示されます。

編集 2: 2 つの列が両方ともフッターまで続く必要があることを明確に述べていませんでした。列の 1 つに境界線を設定したいのですが、その境界線はヘッダーからフッターまでページ全体に適用する必要があります。

編集 3:明確にするために 2 つの見事に描かれた画像を次に示します: と .

score 1 · Accepted Answer

このフィドルを見てください。
中央のセクションをに設定しmin-height: 100%、を使用padding: 100px 0; margin: -100px 0してヘッダーとフッターを配置します。そして、box-sizing: border-boxページ全体の高さを変更しないことに慣れています。padding-bottom: 9999px; margin-bottom: -9999pxまた、十分なコンテンツがない場合でも、コンテンツをフッターまで引き延ばすために使用します。
ヘッダーとフッターを垂直方向に中央揃えにしたい場合は、をにline-height等しく設定できますheight。コンテンツが複数行になる場合は、別の div をネストして次を使用できますdisplay: table-cell; vertical-align: middle;:

HTML

<div id="header" class="vcenter">
    <div>
        Header
    </div>
</div>
...
<div id="footer" class="vcenter">
    <div>
        Footer
    </div>
</div>

CSS

.vcenter {
    display: table;
}
.vcenter > * {
    display: table-cell;
    vertical-align: middle;
}

score 0 · Accepted Answer

これがあなたが探しているものだと思います

http://jsfiddle.net/pr9XJ/1/

HTML：

<body>
        <div id='container'>
            <div id='header'>
                This is the header.
            </div>
            <div id='container2'>
                <div id='container1'>
                    <div id='col1'>
                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />                        Menu<br />
                        Menu<br />
                    </div>
                    <div id='col2'>
                        Content!<br />
                        Content!
                    </div>
                </div>
            </div>
        </div>
        <div id='footer'>
            This is the footer.
        </div>
    </body>

CSS：

html, body
{
    margin: 0px;
    height: 100%;
}
#container
{
    height: auto;
    min-height: 100%;
    width: 1024px;
    margin: auto;
    overflow: auto;
}
#header
{
    width: 100%;
    height: 100px;
    background: purple;
}
#container2
{
    height: 100%;
    width: 1024px;
    background: yellow;
    overflow: auto;
}
#container1
{
    padding-bottom: 32px;
    overflow: auto;
}

#col1
{
    height: 100%;
    float: left;
    width: 150px;
    background: red;
    overflow: auto;
}
#col2
{
    height: 100%;
    float: left;
    width: 874px;
    overflow: auto;
}
#footer
{
    width: 1024px;
    background: purple;
    height: 32px;
    margin-top: -32px;
    clear: both;
    position: relative;
}

score 0 · Accepted Answer

これらは、最近のプロジェクトでこれを行うために使用したリソースです。

cssアンカーdivをページの下部に http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

要約すると、フッター以外のすべてを含むコンテナ要素を次のように設定します。次に、フッターに高さを指定し、物にheight: 100%.を置きます。margin-bottom: [footer height]別のdivpadding-bottomを使用する代わりに、コンテナの最後の要素にをスローしました。http://cureholidayitis.comを参照してください。

質問を誤解した場合はお知らせください。

score 0 · Accepted Answer

jqueryを使用してフッター要素の条件付きクラスを追加しました。基本的にhttps://stackoverflow.com/a/2146903/1804496からの回答をマージして、jsfiddleで動作します。

http://jsfiddle.net/gVEpx/7/

$(function() {
   // Check if body height is higher than window height :)
   if ($("body").height() < $(window).height()) {
      $("#footer").addClass('noOverflowFooter');
   }
});

これは別の例ですが、jQueryはありません

http://jsfiddle.net/gVEpx/8/

// Body Height
bodyH = document.body.offsetHeight;
// Window Height
windowH = window.innerHeight;
// Footer element
footer = document.getElementById("footer");
// Check if body height is higher than window height :)
if (bodyH < windowH) {
   // add to the Class attribute of the footer element
   footer.className += " noOverflowFooter";
}

score 0 · Accepted Answer

これがあなたが望むものかどうかわかりませんか？ JSFIDDLE

divを変更して、#container2divに相対的な高さ#containerを割り当て、割り当てましたoverflow:auto

css - CSS スタイリング レイアウトの問題

5 に答える 5

Related

Reference

css - CSS スタイリングレイアウトの問題