Question

这是div布局：

<div id="mainContainer">
  <div id="leftSpacer"></div>
  <div id="Content"></div>
  <div id="rightSpacer"></div>
</div>

我想要完成的是将mainContent设置为1000px宽，并根据内容设置可变高度。左侧和右侧垫片应根据显示屏幕调整自身大小，以便mainContent不会移动，并且网站显示在页面的中心。实现这种动态重新调整大小的最佳方法是什么？解决方案种子与浏览器无关。

Answer 1

将以下给定的样式应用于您的HTML并检查它是否满足您的要求。

#mainContainer{
    width:100%;
    background:green;
    overflow:hidden
}
#Content{
    background:gray;   
    width:1000px;
    float:left;
    margin:0 auto; 

}
#leftSpacer{
    float:left;
    background:red;
}
#rightSpacer{
    float:left;
    background:red;
}

Answer 2

您可以使用flexbox，如下所示：

html,body{
  margin:0;
  padding: 0;
  height: 100%;
}
#mainContainer {
  width: 100%;
  min-height: 100%;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -moz-box-direction: row;
  -webkit-box-direction: row;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
#rightSpacer,
#leftSpacer{
  background: red;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
#Content {
  width: 1000px;
  background: green;
}

但它不支持ie9-。请查看DEMO，如果您想了解更多flexbox，请点击here。

用动态垫片布置网站div

2 个答案: