首页 / 知识

关于html：如何放置DIV以填充页眉DIV和页脚DIV之间的所有可用空间？

2023-04-15 00:17:00

How to position a DIV to fill all available space between a header DIV and a footer DIV?

假设我有一个父母DIV。内部有三个子DIV：页眉，内容和页脚。标头附加到父级的顶部，并水平填充。页脚连接到父级的底部，并且也水平填充。内容应该填充页眉和页脚之间的所有空间。

父级必须具有固定的宽度和高度。内容DIV必须填充页眉和页脚之间的所有可用空间。当内容DIV的内容大小超过页眉和页脚之间的空间时，内容DIV应该显示滚动条并允许适当的滚动，以使页脚内容不会被遮盖，也不会使页脚遮盖内容。

现在来了困难的部分：您事先不知道页眉和页脚的高度(例如，页眉和页脚是动态填充的)。不使用JavaScript如何定位内容？

例：

1
2
3
4
5
6
7

header

content (how to position it?)

footer

为了进一步阐明此事件，我要实现的目标布局将在商业Web应用程序中使用。父DIV将具有固定但未知的大小(例如，它将恰好是浏览器视口的大小，并由用户自行调整浏览器窗口的大小)。让我们将父DIV称为"屏幕"。

标头将包含一组过滤控件(如文本框，下拉列表和"过滤器"按钮)，如果水平空间不足(因此其高度可以随时更改以适应换行)，它们应换行到下一行。标头应始终可见，并附在"屏幕"顶部。

页脚将包含一组按钮，例如在对话框窗口上。如果水平空间不足，这些也可以换行。页脚必须连接到"屏幕"的底部，以便始终可以访问和看到。

内容将包含"屏幕"内容，例如对话框字段等。如果字段太少，则其余内容将为"空白"(在这种情况下，页脚不应紧随内容之后立即开始，但仍应附加到固定尺寸的"屏幕"的底部)。如果字段太多，则内容DIV将提供滚动条来访问隐藏的控件(在这种情况下，内容DIV不能将自身扩展到页脚下方，因为滚动条将被部分隐藏)。

我希望这能进一步澄清问题，因为我的代表人数太少而无法对您的意见发表评论。

我将为此感到沮丧，但这听起来像是一张桌子的工作。

您想要做的是将三个连续div的总高度设置为一个单位，而高度为100％的1x3表格实际上是一种更干净的解决方案。

纯CSS解决方案1-Flexbox：

您可以使用CSS3 display: flex;属性创建一列以这种方式运行的div(请参阅W3规格)

使用包装器，您可以使用flex-direction: column;声明将列中的所有内容对齐，然后用justify content: space-between;和height: 100vh;填充垂直空间。然后，您要做的就是使您的内容元素使用flex: 1 0 0;展开，并使用overflow-y: auto;为其提供滚动条。

关于浏览器支持的注意事项-尽管大多数现代浏览器都支持flexbox，但仍有一些限制(请参阅：http://caniuse.com/#feat=flexbox)。我建议使用-webkit-和-ms-前缀。

工作示例：请参见以下代码片段和此jsfiddle。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

body {
display: -webkit-flex; /* Safari 6.1+ */
display: -ms-flex; /* IE 10 */
display: flex;
-webkit-flex-direction: column; /* Safari 6.1+ */
-ms-flex-direction: column; /* IE 10 */
flex-direction: column;
-webkit-justify-content: space-between; /* Safari 6.1+ */
-ms-justify-content: space-between; /* IE 10 */
justify-content: space-between; /* Header top, footer bottom */
height: 100vh; /* Fill viewport height */
}
main {
-webkit-flex: 1 0 0; /* Safari 6.1+ */
-ms-flex: 1 0 0; /* IE 10 */
flex: 1 0 0; /* Grow to fill space */
overflow-y: auto; /* Add scrollbar */
height: 100%; /* Needed to fill space in IE */
}
header, footer {
-webkit-flex: 0 0 auto; /* Safari 6.1+ */
-ms-flex: 0 0 auto; /* IE 10 */
flex: 0 0 auto;
}

/* Make it look a little nicer */
body {
margin: 0;
background-color: #8080ff;
}
header {
background-color: #80ff80;
}
footer {
background-color: #ff8080;
}
p {
margin: 1.25rem;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<body>
<header>
<p>
header
</p>
</header>
<main>

<p><center>[wp_ad_camp_4]</center></p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque lobortis augue, in porta arcu dapibus dapibus. Suspendisse vulputate tempus venenatis. Pellentesque ac euismod urna. Donec dui odio, ullamcorper in posuere eu, laoreet sed nisl. Sed vitae vestibulum leo. Maecenas mattis lacus eget nisl malesuada, quis semper urna ornare. Praesent id mauris nec neque aliquet dignissim.
</p>
<p>
Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.
</p>
<p>
Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.
</p>
</article>
</main>
<footer>
<p>
footer
</p>
</footer>
</body>

有关如何使用flexbox的更多信息，请参见以下指南：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes
A Complete Guide to Flexbox

纯CSS解决方案2-显示表格[旧解决方案]：

这也可以通过使用CSS display: table;属性来完成(请参阅W3规范)。

HTML：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

html, body, #screen, #content, #content_frame {
height: 100%; /* Make #screen viewport height and #content fill space */
}
#screen {
display: table;
}
#header, #content, #footer {
display: table-row;
}
#content_frame {
overflow-y: auto; /* Add scrollbar */
position: relative;
}
#content_wrap {
position: absolute; /* Fix problem with overflow in FF */
}

对于CSS表格元素及其子元素来说，overflow属性是不可靠的，因此我不得不嵌套内容。在这种情况下，我被迫嵌套两次并使用position: absolute;使其在Firefox中工作。也许其他人可以想出一个更优雅的解决方案来避免这种"神魂颠倒"。

这是一个起作用的jsfiddle。

警告：这在Opera 12中似乎不起作用！ content div占用了父级的高度的100％，这导致行溢出表(就像在Firefox中一样)。

如果可以不用滚动主要内容就可以摆脱困境，那么最好使用footerStickAlt方法来确保页脚停留在屏幕底部或内容底部(如果内容超出屏幕底部) )。

您是否需要更改div的中心尺寸？如果您只是想确保其背景(＃8080ff)出现在页眉和页脚之间，为什么不只将包含div的背景设置为＃8080ff。页眉和页脚背景将覆盖该位置，而div的其余背景将是正确的。

父母需要保持固定的身高吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

header

content (how to position it?)
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller

footer
<BR />taller

如果父母的身高是固定的，这是我所知道的最接近的方式-如果这些色块(相对于文本而言)确实很重要，而不仅仅是用于说明，那还是不完全正确DIV的边界：

1
2
3
4
5
6
7

header <BR .> taller

content (how to position it?)<BR /> and another line

footer <BR /> taller

绝对的定位使您感到困惑。尝试这样的事情：

HTML：

1
2
3
4
5
6
7

header

content

footer

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#wrapper {
width: 200px;
height: 200px;
overflow: visible;
background: #e0e0ff;
}
#header {
background: #80ff80;
}
#content {
background: #8080ff;
}
#footer {
background: #ff8080;
}

编辑：也许我误会了，您是否希望所有内容都适合200x200px的框，还是希望框增加其高度以适合内容？

页眉空间填充附加