css - 两个带边框的全屏浮动

Question

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

#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 边框让浮动填充屏幕的其余部分。

Answer 1

The float no longer works because of the box model where the border is added to the width instead of included in the width, you have already used up 100% of the width by doing width:70% and width: 30%.

If you plan on applying a border you might want to apply it to a child element inside one of the wrapping floated columns and use those parent columns only as a grid system to structure your other content.

Alternatively try bootstrap grids

Answer 2

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

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

这篇博客文章解释了这一点，以及解决这个特定问题的一些其他选项。