html - 使用动态分隔符布置网站 div

Question

这是一个 div 布局：

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

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

Answer 1

您可以使用 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，请点击这里。

Answer 2

将以下给定样式应用于您的 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;
}