Css固定宽度+ 100％填充。有可能用一个容器吗？

Question

我需要制作具有100％宽度和渐变背景的ui控制面板。此控制面板上的UI元素应该具有1000px的宽度，并且应该居中。

我有两个要素： 面板（宽度100％，渐变背景），全局包装器 panel-wrapper（宽度为1000px，透明背景），放在“panel”元素中，包含UI元素。

它在我需要的所有浏览器中都很棒，但我真的不喜欢使用两个HTML元素，逻辑上它应该只是一个。或许可以有一个固定宽度（1000px）的元素“面板”和自动填充，它将覆盖左侧和右侧的所有自由空间？ （如果我的解释很疯狂，我已经制作了一张图片来表明：））

有可能吗？

Answer 1

您可能会使用calc()功能，但它不是高度符合浏览器的。

Here是一个简单示例，可以找到有关兼容性和使用情况的更多信息here。

*我在Firefox中做了这个例子，没有在别处测试过。

仅为快速代码示例，以下显示了一个解决方案：

div {
    width: 100px;
  background-color: blue;
  height: 100px;
  padding-left: calc(50% - 50px);
  padding-right: calc(50% - 50px);

}

Answer 2

挑战在于你不能真正将百分比和固定宽度与传统意义上的填充结合起来，因为填充被添加到总宽度中。

如果总宽度为100％，并且您希望中心的内容为500px，则无法计算填充。

但是，使用CC3，您可以使用box-sizing来更改在框模型中放置填充的位置。

http://www.css3.info/preview/box-sizing/

唉，我仍然认为这不会让你想要你想要的只是因为游戏中仍然存在未知变量（100％宽度对象所在的容器宽度）。

最后，我们有时可能会以过度优化的名义来考虑这些解决方案。在这种情况下，额外的div似乎完全可以接受，并且可能是正确的解决方案。

Answer 3

为什么padding？

您可以将左右边距设置为auto，这会使div居中..

所以只需设置

.panel{
    width:1000px;
    margin:0 auto;
}