两个带边框的全屏浮动答案

【问题标题】：Two full screen floats with border两个带边框的全屏浮动
【发布时间】：2013-10-10 19:37:04
【问题描述】：

我正在设计一个有两个浮动列的网站，我想填满整个屏幕。

#column_main{ 
      position:relative;
      background:#ffffff;
      float:left;
      width:70%;
      height:auto;
      min-height:550px;
}
#column_side{
     position:relative;
     background:#dbdada;
     float:left;
     width:30%;
     height:auto;
     min-height:550px;
}

如果我有下面的行到#column_main

 border-left:solid 1px #c0c1c4;

浮子乱了，它们不再并排了。

在 IE 中，我已经能够通过将#column_main 宽度设置为 auto 来解决问题，它会填充页面的其余部分。这在 Firefox 中不起作用，我尝试稍微降低百分比，但这会在 #column_main 和页面右边缘之间留下空隙。有没有办法让左边的 1px 边框让浮动填充屏幕的其余部分。

【问题讨论】：

标签： css css-float multiple-columns

【解决方案1】：

浮动不再起作用，因为边框被添加到宽度而不是包含在宽度中的框模型，您已经通过执行 width:70% 和 width:30% 用完 100% 的宽度。

如果您计划应用边框，您可能希望将其应用到其中一个环绕浮动列内的子元素，并仅将这些父列用作网格系统来构建您的其他内容。

或者试试bootstrap grids

【讨论】：

【解决方案2】：

将box-sizing: border-box; 添加到#column_main

此属性基本上表示您希望将框大小应用于边框及其内的所有内容。

This blog post 解释了这一点，以及解决此特定问题的一些其他选项。

【讨论】：