假设我有一个父母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的框，还是希望框增加其高度以适合内容？
