Joh*_*ock 116
像这样的东西
<html>
<body style="height:100%; width:100%">
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
</body>
</html>
- @JohnHartsock拒绝投票可能是因为它是内联css，并且没有解释为什么它只是一个复制粘贴的答案 (2认同)
mey*_*tee 49
如果您的目标是支持灵活方框的浏览器,您可以执行以下操作: http://jsfiddle.net/meyertee/AH3pE/
HTML
<div class="container">
<header><h1>Header</h1></header>
<div class="body">Body</div>
<footer><h3>Footer</h3></footer>
</div>
CSS
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
header {
flex-shrink: 0;
}
.body{
flex-grow: 1;
overflow: auto;
min-height: 2em;
}
footer{
flex-shrink: 0;
}
更新:
请参阅"我可以使用"以获得灵活方框的浏览器支持.
Sti*_*ers 40
方法1 - flexbox
它适用于已知和未知的高度元素.确保设置外股利height: 100%;和重置默认margin的body.请参阅浏览器支持表.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.content {
flex: 1;
overflow: auto;
background: pink;
}<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>方法2 - CSS表
对于已知和未知的高度元素.它也适用于包括IE8在内的传统浏览器.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.scrollable {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
overflow: auto;
}<div class="wrapper">
<div class="header">
<div class="inner">Header</div>
</div>
<div class="content">
<div class="inner">
<div class="scrollable">
<div style="height:1000px;">Content</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">Footer</div>
</div>
</div>方法3 - calc()
如果页眉和页脚是固定高度,您可以使用CSS calc().
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.header, .footer {
height: 50px;
background: silver;
}
.content {
height: calc(100% - 100px);
overflow: auto;
background: pink;
}<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>接近4% - 所有人
如果页眉和页脚是已知高度,并且它们也是百分比,您可以只进行简单的数学计算,使它们在100%高度.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.header, .footer {
height: 10%;
background: silver;
}
.content {
height: 80%;
overflow: auto;
background: pink;
}<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>现在我们有了 CSS 网格。欢迎来到 2019 年。
/* Required */
body {
margin: 0;
height: 100%;
}
#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 30px 1fr 30px;
}
#content {
overflow-y: scroll;
}
/* Optional */
#wrapper > * {
padding: 5px;
}
#header {
background-color: #ff0000ff;
}
#content {
background-color: #00ff00ff;
}
#footer {
background-color: #0000ffff;
}<body>
<div id="wrapper">
<div id="header">Header Content</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="footer">Footer Content</div>
</div>
</body>- 你不需要身高。只需将包装高度设置为 100vh，它就可以在这里和野外工作。 (2认同)
截至 2013 年：这将是我的方法。 js小提琴：
HTML
<header class="container global-header">
<h1>Header (fixed)</h1>
</header>
<div class="container main-content">
<div class="inner-w">
<h1>Main Content</h1>
</div><!-- .inner-w -->
</div> <!-- .main-content -->
<footer class="container global-footer">
<h3>Footer (fixed)</h3>
</footer>
社会保障局
// User reset
* { // creates a natural box model layout
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} // asume normalize.css
// structure
.container {
position: relative;
width: 100%;
float: left;
padding: 1em;
}
// type
body {
font-family: arial;
}
.main-content {
h1 {
font-size: 2em;
font-weight: bold;
margin-bottom: .2em;
}
} // .main-content
// style
// variables
$global-header-height: 8em;
$global-footer-height: 6em;
.global-header {
position: fixed;
top: 0; left: 0;
background-color: gray;
height: $global-header-height;
}
.main-content {
background-color: orange;
margin-top: $global-header-height;
margin-bottom: $global-footer-height;
z-index: -1; // so header will be on top
min-height: 50em; // to make it long so you can see the scrolling
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
height: $global-footer-height;
background-color: gray;
}
小智 5
这对我有用。我不得不添加一个 margin-bottom 以便页脚不会吃掉我的内容：
header {
height: 20px;
background-color: #1d0d0a;
position: fixed;
top: 0;
width: 100%;
overflow: hide;
}
content {
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
footer {
position: fixed;
bottom: 0px;
overflow: hide;
width: 100%;
}