我有这个布局(简化)
<div id="main">
<div id="header">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
我需要固定页眉和页脚，同时保持内容可滚动。问题是所有 3 个都居中，如果我设置 #content {overflow-y: scroll;}并出现滚动条，<div id="content"> 的全部内容向左移动并且与页眉和页脚不一致。有办法防止吗？或者可能有一些解决方法？
编辑:JSFiddle example .
最佳答案
这就是你想要的？
我是用 Flexbox 做的，但是如果你不想使用修改后的盒子模型，我可以用 display: table 来做，例如。
演示:
**
我做了什么？
**
第一个演示:使用 Flexbox 进行布局
在这个演示中，我只在 body 元素中添加了以下类:
<body class="p-flexbox flex-vcc">
<!-- The rest of your content -->
</body>
地点:
- p-flexbox 表示parent-flexbox。
- flex-vcc 表示 flexbox-vertical-center-center
并遵循 CSS 规则:
.p-flexbox {
/* Flexbox: Init setup */
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-vcc {
/* Flexbox: Principal setup */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
这是什么意思？这意味着 body 的所有 child 将以垂直轴为中心，并将以另一个轴(x 轴)为中心。
此外，我稍微更改了您的 CSS 代码，为一些元素添加了尺寸。
第二个演示:使用 display: table 进行布局
display: table 是在网页中进行布局的好方法。以前，Web 开发人员使用 table 元素(在标记中)进行布局。这不是一个好的做法，因为表格仅适用于表格数据。但是，如果您在样式中使用 display:table，您将获得与在标记中使用 table 元素进行布局相同的结果。
为此，您只需将以下类添加到“容器”元素(在我的例子中，div.principal):
div.principal {
display: table;
}
这意味着 div.principal 的行为类似于 table 元素。有了它，您可以添加与表格相同的属性!
例如:border-collapse、border-spacing等
嗯，就是这样。
干杯， 莱昂纳多
关于html - 具有固定居中布局的页面，滚动条移动内容的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17252428/