CSS 百分比和像素布局相结合

Question

我真的在为此苦苦挣扎，如果有人能帮助我，我永远感谢你。

我有一个宽度为 1260 像素的 CSS DIV，称为 wrapper：

#wrapper {
width: 1260px;
}

在这个包装器 DIV 中，我有三个 DIV，分别称为 column-left、column-mid 和 column-right：

#column-left {
width: 245px;
float: left;
}

#column-mid {
width: 55.55555555555556%; /* (700px/1260px) */
float:left
margin-left: 35px;
margin-right: 35px;
}

#column-right {
width: 245px;
float:left;
}

非常简单，它是包装 div 中的三列布局。中间 div “column-mid” 设置了百分比宽度。它应该是 700px 宽，即 1260px（包装 div 的宽度）的 55.55555555555556%。

在这个分辨率下一切看起来都很好。但是，如果我将包装 div 的宽度更改为 1400px，则 column-mid div 不会扩展以正确填充空间。当它实际上应该填充 794px 时，它的等效宽度只会增加到 775px，因为 794px 是 1430px 的 55.55555555555556%

为什么 column-mid div 只能达到 775px？我想要实现的是左右列保持固定大小（245px），但中间列应相对于包装器 div 的大小增加。

Answer 1

为什么不试试这个方法：http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

我认为这就是你想要的，基本上：固定左右列，主要内容根据包装宽度。我使用绝对定位将它们固定到位；在右边，如果你有一列有背景并希望它一直向下运行，我使用 100% 高度，左边的高度根据内容而定。

Answer 2

发生这种情况是因为您没有根据整个宽度更改 width 的 #column-left 和 #column-right 而只是更改 width 的 #column-mid。

对于#column-left 的width 和#column-right 保持245px 和width 的width 响应的情况，

试试这个：

#column-mid {
    width: calc(100% - 560px); //245px for #column-left, 245px for #column-right and 70px for margin
}

另一种解决方案：

试试：

#wrapper {
    display:table;
}
#column-left,#column-mid,#column-right{
    display:table-cell;
}
#column-left,#column-right{
    width: 245px;background:#f7f7f7;
}
#column-mid {
    background:#ccc;
    padding:0 35px;//for spacing
}

Here is the fiddle.