0

我有这个布局（简化）

<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 示例。

4

1 回答 1

1

这就是你想要的？

我是用 Flexbox 做的，但如果你不想使用一个正在修订的盒子模型，我可以用display: table，例如。

演示：

  1. 使用 Flexbox 布局
  2. 布局与display: table

**

我做了什么？

**

第一个演示：使用 Flexbox 进行布局

在这个演示中，我只在body元素中添加了以下类：

<body class="p-flexbox flex-vcc">
 <!-- The rest of your content -->
</body>

在哪里：

  1. p-flexbox表示parent-flexbox。
  2. 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等。

嗯，就是这样。

干杯，莱昂纳多

于 2013-06-22T16:00:09.843 回答