12

ページのレイアウトは次のとおりです。

<div id="main" style="min-height:500px;"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

メインdivは、固定の高さまたは最小の高さ（style="height:500px;"またはstyle="min-height:375px;"）を持つことができます。

フッターとヘッダーを必要なだけの高さにして、コンテンツが残りを取得できるようにすることは可能ですか(content.height = main.height - (header.height + footer.height))（JavaScript、エラスティックヘッダーとフッターを使用せずに、コンテンツが残りを取得します）？

4

3 に答える 3

3

はい、可能です。

HTML：

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

CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for #main min-height */
}

div#main {
    position: relative; /* needed for footer positioning */
    height: auto !important; /* real browsers */
    height: 500px; /* IE6: treated as min-height*/
    min-height: 500px; /* real browsers */
}

div#header {
    /* Will be as high as its content */
}

div#content {
    /* Will be displayed below #header regardless to its height */
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */
}

div#footer {
    position: absolute;
    width: 100%;
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */
    bottom: 0; /* stick to bottom */
}

これは実際には#content希望どおりに高さを設定しませんが、すべてを適切に表示します（#main予想される高さを持ち#footer、下部にあり、カバーしていません#content）。

于 2012-06-06T10:40:45.623 に答える
1

私が見つけた唯一の解決策（IE6/7では正しく機能しません）...

<table height="500" cellpadding="0" cellspacing="0" border="0">
    <tr height="1"><td>Header goes here</td></tr>
    <tr><td>Main content goes here</td></tr>
    <tr height="1"><td>Footer goes here</td></tr>
</table>

上段と下段は高さを低く設定し、中段は高さを設定しないのがポイントです。これにより、ブラウザは上部と下部の行をできるだけ小さく保ち、未使用のスペースを占有するために中央の行を使用するようになります。しかし、IE6/7 はこれを無視し、未使用のスペースを 3 行すべてに均等に分散しようとします。

それでも、JavaScript を使わずに (または、IE 固有の CSS 式 (つまり、動的プロパティ) を追加することはお勧めしません)、これが最も近い方法かもしれません。

HTML テーブルは、JavaScript を使用せずに垂直方向のレイアウト (サイズと配置) をある程度制御できる唯一のオプションです。それが必要な場合は、HTML テーブルが最適です。ただし、CSS ベースのレイアウトの制限内にとどまる方がよい場合があります。

于 2012-06-06T14:47:48.867 に答える
0

単純に CSS フッターを使用するには、サイズが固定されている必要があります。

于 2012-06-06T10:34:49.473 に答える