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

我真的很挣扎，如果有人能帮助我，我永远感谢你

我有一个宽度为1260px的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.55555 6%

这项决议看起来很好。但是，如果我将包装器div的宽度更改为1400px，那么列mid div将不会扩展以正确填充空间。它的等效宽度只增加到775px，而实际上它应该填充794px，因为794px是1430px的55.5555555.6%

---

为什么列中间部分只升到775px？我试图实现的是左右列保持固定大小（245px）但是中间的列应该随着包装器div的大小而增加。

这是因为您没有根据整个宽度更改

#column left

和

#column right

的

宽度，而只是更改
#column mid
的
宽度

对于
左列
和
右列
的
宽度
保持
245px
和
中列
的
宽度
保持响应的情况

试试这个：

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

另一个解决方案：

尝试：

为什么不试试这种方法：

我想这就是你想要的，基本上：固定左栏和右栏，主要内容根据包装宽度。我使用绝对定位来保持它们的位置；在右边，我使用了100%的高度，如果你有一个有背景的列，并且希望它一直向下运行，那么左边的高度根据内容而定。
这些分辨率真的很奇怪。你能解释一下为什么你想要55.5555556%的百分比，因为对于一个站点来说，这些分辨率通常是不可接受的。所有内容都需要适合网站，无需侧滚。使用适当的分辨率，处理适当的百分比。但我必须考虑到两边的35像素的余量。那么它会是calc（100%-560px）吗？请注意，这只是IE9和以上版本：。也就是说，媒体的质疑是可以接受的fallbacks@volumeone我已经编辑了答案。希望它能解决你的问题。新的答案非常优雅。也许比同样有效的卡西米尔的解决方案更干净。现在不知道该配哪一个！也许很优雅，但我觉得显示：table
应该用于类似于table的元素，而不是基本的站点布局/结构。此外，
display:table cell
不受IE7（）的支持，因此这对于您的支持级别来说还不够好。这很好。填充有点让我困惑，我习惯于用边距来创造空间。但是，如果它起作用，它就起作用了<代码>边距

也同样有效，对吗？我同意，使用

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
}

#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;
}