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仍然是整个页面宽度，这意味着右边距浏览器右边200px。如何让主 div 填充剩余的宽度？

（最终我想将其他 div 放在 main 中，并使其宽度以相对于主 div 的百分比表示）

这甚至可能吗？

4

4 回答 4

1

不要使用位置。使用浮点数。将“left” 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 回答
1

不要使用被认为是邪恶的定位，而是使用浮动。

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

演示

于 2012-11-21T18:45:49.520 回答
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 回答
0

是的，使用 CSS calc 很容易实现。不幸的是，到目前为止，只有 Chrome 支持 CSS calc。

这是一个更好的方法：
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正好 200px 右边 0px 给你全宽减去#left

于 2012-11-21T18:36:38.980 回答