我正在尝试使用 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中,并使它们的宽度以相对于主div的%表示)
这可能吗?
最佳答案
不要使用位置。使用 float 。将“左”div 向左浮动,设置其宽度。给“main”div 一个左侧 div 宽度的左边距,并将宽度设置为 auto。
#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}
关于css - 获取 DIV 以填充剩余宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13499688/