3

CSS を使用して、左側の固定幅の div (および固定高さのヘッダーの下) の後、残りのページ幅を満たす DIV を取得しようとしています。

私が持っているCSSは次のとおりです。

body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;}

HTML は次のとおりです。

<div id="header">Header stuff here</div>    
<div id="left">Left stuff here</div>    
<div id="main">Main stuff here</div>

(簡潔にするために head と doctype はここでは省略されています) レンダリングされると、メインの div はページ全体の幅のままです。つまり、右端はブラウザーの右端から 200 ピクセル離れています。メイン div で残りの幅を埋めるにはどうすればよいですか?

(最終的には、他の div をメイン内に配置し、それらの幅をメイン div に対する % で表したいと思います)

これは可能ですか？

4

4 に答える 4

1

悪と見なされるポジショニングを使用する代わりに、フロートを使用してください。

#left {float:left; width:200px; background:#ccffcc;}    
#main {margin-left:200px; background:#ffcccc;}

デモ

于 2012-11-21T18:45:49.520 に答える
1

位置を使用しないでください。フロートを使用します。「左」の div を左にフロートさせ、その幅を設定します。「メイン」div に左 div の幅の左余白を与え、幅を auto に設定します。

#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}

例: http://jsfiddle.net/GhtHp/1/

于 2012-11-21T18:30:37.787 に答える
0

はい、CSS calc で簡単に可能です。残念ながら、CSS calc は今のところ Chrome でしかサポートされていません。

より良い方法は次のとおりです:
HTML:

<div id="header"></div>
<div id="left"></div>
<div id="main"></div>

CSS:

#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}

左#mainから正確に 200 ピクセル、右から 0 ピクセルとすると、全幅マイナスになります。#left

于 2012-11-21T18:36:38.980 に答える
0

これはあなたが探しているものを達成していますか？

HTML -

<div id="header">Header stuff here</div>    
<div id="left">Left stuff here</div>    
<div id="main">Main stuff here</div>​

CSS -

div {
    border: 1px solid black;
}

#left {
    float: left;
}
​

Jsfiddle - http://jsfiddle.net/xzWK5/

于 2012-11-21T18:31:11.157 に答える