0

このタイプのレイアウトを必要とするものに取り組んでいます：

ここに画像の説明を入力してください

画面の残りのスペースの暗黙のサイズを持つコンテンツが必要です。私は多くのことを試みました

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

    <div id="content">
    </div><!-- /content -->


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

これは、テーブル表示手法で機能します。

#wrapper {display: table; height: 100%; width: 100%; background: yellow;}
#header { display: table-row; background: black;height: 50px;}
#container { display: table-row; height: 100% }
#footer {display: table-row;background: black; height: 50px;}

しかし、私はそれなしでそれをどのように行うでしょうか？

#wrapper {width: 100%; height: 100%; position: relative; min-height: 800px;}
#header {position: relative; width: 100%; height: 42px;}
#footer {height: 45px; width: 100%; background: #000; position: absolute; bottom: 0; overflow-y: hidden;}

また、コンテンツをposition：absoluteにしたくありません

4

4 に答える 4

1

あなたが固定された高さで生きることができるならば、これはうまくいくかもしれません：

body, html, #wrapper, #content
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#header,
#footer
{
    position: relative;
    height: 42px;
    background: red;
}
#content
{
    height: auto;
    min-height: 100%;
    margin:-42px 0;
    padding: 42px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

これがフィドルです。

于 2013-03-26T20:59:29.910 に答える
0

このHTMLを使用する

<div id="wrapper">
<div id="header">This is my header
</div>

<div id="content">This is my content
</div><!-- /content -->


<div id="footer">This is my footer
</div>
</div>

そしてcssはこのようになります

#wrapper {width: 100%; 
height: 100%; 
position: relative; 
min-height: 800px;}


#header {position: relative; 
width: 100%; 
height: 42px; 
background-color:#CA3A3A;}


#content{background-color:#089ED0;
min-height: 800px;}


#footer {height: 45px; 
width: 100%; 
background-color:#CA3A3A; 
position: absolute; 
bottom: 0; 
overflow-y: hidden;}
于 2013-03-26T21:02:31.393 に答える
0

これは過去に私のために働いた：http： //ryanfait.com/sticky-footer/

于 2013-03-26T21:03:00.357 に答える
0

これについて私が見つけた最善の解決策は、css3の新しいcalcメソッドを使用することです。また、modernizrを使用してその可用性をテストし、使用できない場合は、JSを使用してコンテナー領域の高さを手動で設定します。

于 2013-10-08T20:35:56.487 に答える