web-dev-qa-db-ja.com

CSS 100％高さレイアウト

これは一種の一般的な問題であり、いくつかの解決策を調べましたが、探しているものを正確に見つけることができませんでした。

this をテーブルレスレイアウトに変換したいと思います。

enter image description here

注：ヘッダーとフッターはピクセル単位で固定の高さに設定する必要があります（50pxは問題ありません）。

私が抱えている主な問題は、テーブルで行われたときのように振る舞うように中央にその「大きな箱」を取得できないことです。可変長のコンテンツ（テキスト、画像）で問題なく動作するソリューションがありますが、このボックスの外観と動作を、枠、丸い角などすべてのボックスのようにしたいと思います。

csslayoutheight
36
ile

テーブルスタイルのCSSプロパティを使用してそれを行うことができますが、それでもテーブルのマークアップは少なくなります（それでもなお勝ちです）。

例

Example

HTML

<div id="container">
    <div id="header"><div>header</div></div>
    <div id="content"><div>content</div></div>
    <div id="footer"><div>footer</div></div>
</div>

CSS

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

#container {
    display: table; 
    width: 100%;
    height: 100%;
    border: 1px solid red;   
    text-align: center;
}

#container > div {   
    display: table-row;   
    width: 100%;
}

#container > div > div {   
    display: table-cell;   
    width: 100%;
    border-radius:10px; 

}

#header > div {
    height:50px; 
    border:solid 2px #aaa;
}

#content > div {
    height: 100%;    
    background:#f0f4f0; 
    border:solid 2px #5a5;
}

#footer > div {
    height:50px; 
    border:solid 2px #a55;
}

jsFiddle 。

46
alex

「複数の絶対座標」はこれを実現する良い方法です。これは、絶対にボックスを配置し、上部と下部の両方の座標を指定した場合です。高さを指定しない場合、上から10px、親の下端から10pxになるボックスを取得します。

ここに例があります

そのブラウザーを気にする場合は、追加する必要があるIE6固有のスタイルがあります。

ここに記事があります テクニック（およびIE6の修正）-この問題に使用しない場合でも、知っておくと良いでしょう。

29
Ben Hull

サブ要素の高さについては何も言わなかったので、いくつかの推測をしなければなりませんでした。必要に応じてパーセンテージを使用できます。

<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}

#header {
height:15%;
width:100%;
background-color:red;
}

#center {
height:75%;
width:100%;
background-color:blue;
}

#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>

    <body>
    <div id="mainContainer">
    <div id="header">Header</div>
    <div id="center">Center</div>
    <div id="footer">Footer</div>

</div>

    </div>
    </body>
1
Layke