Question

我有这个布局（简化）

<div id="main">
    <div id="header">
        ...
    </div>
    <div id="content">
        ...
    </div>
    <div id="footer">
        ...
    </div>
</div>

我需要修复页眉和页脚，同时保持内容可滚动。问题是所有3个都居中，如果我设置#content {overflow-y: scroll;}并且滚动条出现，<div id="content">的整个内容将向左移动，并且与页眉和页脚不一致。有没有办法防止它？或maby一些解决方法？

编辑：JSFiddle example。

Answer 1

这是你想要的吗？

我是使用Flexbox制作的，但是如果您不想使用正在修改的盒子模型，我可以使用display: table进行此操作。

演示：

Layout with Flexbox
Layout with 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;
}

这意味着什么？这意味着所有身体的孩子将以垂直轴为中心，并以另一个轴（x轴）为中心。

此外，我将CSS代码更改为一些元素。

第二个演示：display: table

display: table是在网页中进行布局的好方法。之前，Web开发人员使用table元素（在标记中）进行布局。这不是一个好习惯，因为这些表仅用于表格数据。但是如果在样式中使用display: table，则会获得与使用标记中的table元素进行布局时相同的结果。

为此，您只需将以下类添加到“容器”元素（在我的情况下为div.principal）：

div.principal {
   display: table;
}

这意味着div.principal的行为类似于table元素。有了这个，您可以添加与表相同的属性！

例如：border-collapse，border-spacing等

嗯，就是这样。

干杯，莱昂纳多

具有固定居中布局的页面，滚动条切换内容的位置

1 个答案:

我做了什么？