获取 DIV 以填充剩余宽度答案

【问题标题】：Get DIV to fill remaining width获取 DIV 以填充剩余宽度
【发布时间】：2017-09-10 15:11:40
【问题描述】：

我正在尝试使用 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>

（为简洁起见，此处省略了头部和文档类型）渲染时，主 div 仍然是整个页面宽度，这意味着右侧边缘距离浏览器右侧边缘 200px。如何让主 div 填充剩余的宽度？

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

这可能吗？

【问题讨论】：

标签： css layout

【解决方案1】：

不要使用位置。使用浮点数。将“left” div 向左浮动，设置其宽度。给 "main" div 一个左边 div 宽度的左边距，并将宽度设置为 auto。

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

此处示例：http://jsfiddle.net/GhtHp/1/

【讨论】：

注意，这会导致#main页面向右溢出201px
@GiantDuck 抱歉，#main 的宽度应该设置为自动。我已经修复了我的示例
width: auto 很好，除非内部 div 小于全宽；如果它们的宽度如问题中所述以百分比表示，则存在问题。 ://
你可能不得不分解并只使用一个包含两个单元格的表格来让你的外部结构表现得很好，而不需要大量的 CSS 来解决可能出现的所有奇怪情况。
感谢您的帮助 - 它很有效。我能够将更多的 div 放在 main 中，并将它们的宽度设置为 main 的 %，这很棒！

【解决方案2】：

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

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

DEMO

【讨论】：

【解决方案3】：

这是否实现了您的目标？

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/

【讨论】：

【解决方案4】：

是的，使用 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

【讨论】：