0

私は今、次のことを機能させるために何時間も努力しています：

コンテナdivに3つのdivが必要です。

  1. それらは垂直に積み重ねる必要があります（topDiv、middleDiv、bottomDiv）
  2. topDivの高さは20pxである必要があります（固定）
  3. MiddleDivは、残りのスペースを残す必要があります（テーブルの*やLaTeXの\ vfillなど）
  4. bottomDivの高さは50pxである必要があります（固定）

それはそれほど難しく聞こえませんか？わからない！

ご協力いただきありがとうございます。

4

3 に答える 3

7

このようなものがあなたのために働くかもしれません：

http://jsfiddle.net/nCrEc/1/

編集：

このバージョンは、ブラウザウィンドウ http://jsfiddle.net/nCrEc/2/に合わせて拡張されます

html：

<div class="con">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

css：

.con{width:200px; top:0;bottom:0;left:0; position:absolute;background:#ff0;}

.top{width:200px;height:20px;position:absolute;top:0;left:0;background:#f60;}

.bottom{width:200px;height:50px;position:absolute;bottom:0;left:0;background:#f60;}
.middle{width:200px;min-height:1px; position:absolute;bottom:50px;top:20px;left:0;background:#06f;}
于 2012-09-21T14:32:35.167 に答える
1

Flexboxを使用すると簡単ですが、まだ開発中であり、現時点ではChromeでのみ実際に機能します。

そうでなければ、あなたは* {box-sizing: border-box;}あなたの人生を楽にするために使うことができます。古いブラウザをサポートすることが重要な場合は、 IE6-7ポリフィルもあります。

これが例です。

*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;}
html,body{width:100%; height:100%;}
div{width:100%; background:salmon;}
.middle {background:lightblue; height:100%; padding:100px 0;}
.top, .bottom {height:100px; position: absolute; left:0;}
.top {top:0; }
.bottom {bottom: 0;}
于 2012-09-21T14:42:41.610 に答える
0

私はこのウェブサイトで非常に似たようなことをしました：

http://www.probusllandudno.org.uk/

ディナー2012のリンクをクリックします（FF Web開発者を使用している場合は、ビューで生成されたソースを使用できます）

主なポイントは、ドキュメント内でdivを整理し、固定幅（私の場合）またはwidth = 100％を割り当てることです。上部と下部のdivの高さは固定されています。cssを参照してください。

補遺

別の応答は、最も具体的にパディングに関する問題をカバーする洗練されたソリューションを提供します。コンテンツがソリューションにどのように影響するかを指定していません。私のウェブページは中央揃えのテキストです

于 2012-09-21T14:38:59.913 に答える