How to make the main content div fill height of screen with css

所以我有一个包含页眉、主体和页脚的网页。 我希望主体填充页面的100% (在页脚和页眉之间填充100%) My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.

我创建了一个简单的 html 文件，因为我实际上不能从实际的项目中发布整个页面/css。对于示例代码，即使主内容主体填满了屏幕，它也会向下延伸40px (我假设这是头部的原因)。

html,
body {
margin: 0;
padding: 0;
}


header {
height: 40px;
width: 100%;
background-color: blue;
}


#maincontent {
background-color: green;
height: 100%;
width: 100%;
}


footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>


<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>


<body>
<header></header>
<div id="maincontent">


</div>


<footer></footer>
</body>


</html>

有人知道答案吗？

317793 次浏览
小开

使用没有定义高度的 top: 40px和 bottom: 40px(假设您的页脚也是40px) ，您可以让它工作。

.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}

JSFiddle

小开

这允许我的表单以最小宽度居中的内容正文不会有趣地折叠:

html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}


body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}


div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}


div#pageContent {
padding-bottom: 60px;
}


div#header {
width: 100%;
}

我的布局页面是这样的:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>

例如: http://data.nwtresearch.com/

还有一点需要注意的是，如果希望获得与所添加代码类似的完整页面背景，请从包装器 div: http://jsfiddle.net/mdares/a8VVw/中删除 height: auto !important;

小开

不知道你想要什么，但我想我明白了。

标题-停留在屏幕的顶部？ 一个脚注-停留在屏幕的底部？ Content area -> fits the space between the footer and the header?

您可以通过绝对定位或固定定位来实现这一点。

Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/

标价:

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS:

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

为了使它工作得更好，我建议使用% 而不是像素，因为不同屏幕/设备大小会遇到问题。

小开

虽然这个问题听起来很简单，但实际上并不简单！

我已经尝试了很多方法来实现您使用纯 CSS 所要做的事情，但是我所有的尝试都失败了。但是。.如果你使用 javascript 或者 jquery，有一个可能的解决方案！

假设你有这样的 CSS:

#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}

Assuming you have this HTML:

<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

试试 jquery:

<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>

注意: 我在这个解决方案中没有使用绝对定位，因为它在移动浏览器中可能看起来很丑陋

小开
最佳答案

这些没必要

  • remove height in %
  • 删除 jQuery

使用底部和顶部拉伸 div:

.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}

检查我的密码 http://jsfiddle.net/aslancods/mW9WF/

或者点击这里:

body {
margin:0;
}


.header {
height: 40px;
background-color: red;
}


.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}


.content {
color:#fff;
}


.footer {
height: 20px;
background-color: blue;
    

position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
&nbsp;
</div>
<div class="mainBody">
&nbsp;
<div class="content" >Hello world</div>
</div>
<div class="footer">
&nbsp;
</div>

小开

Well, there are different implementations for different browsers.

在我看来，最简单、最优雅的解决方案是使用 CSS calc ()。不幸的是，这种方法在 ie8或更低版本中不可用，在 android 浏览器和移动 Opera 中也不可用。但是，如果使用单独的方法，可以尝试这样做: http://jsfiddle.net/uRskD/

标价:

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

还有 CSS:

html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}

我的第二个解决方案涉及到粘贴页脚的方法和方块大小。这基本上允许 body 元素填充其父元素的100% 高度，并且使用 box-sizing: border-box;在其中包含100% 的填充。http://jsfiddle.net/uRskD/1/

html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}

我的第三个方法是使用 jQuery 来设置主要内容区域的最小高度

html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}

And the JS:

$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
小开

不需要 Javascript，不需要绝对定位，也不需要固定的高度。

这里有一个全 CSS/CSS 的方法，不需要固定高度或绝对定位:

/* Reset */


html,
body {
height: 100%;
margin: 0;
padding: 0;
}




/* Essentials */


.container {
display: table;
}


.content {
display: table-row;
height: 100%;
}


.content-body {
display: table-cell;
}




/* Aesthetics */


.container {
width: 100%;
height: 100%;
}


.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}


.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>

这种方法的好处是，页脚和页眉可以增长到与其内容相匹配，主体将自动调整自己。您也可以选择使用 css 来限制它们的高度。

小开

有一个称为视口高度/视口宽度的 CSS 单元。

例子

类似的 .mainbody{height: 100vh;}

或者90vh = 视窗高度的90% 。

**IE9+ and most modern browsers.

小开

这个问题是 使用 div 填充剩余屏幕空间的高度的副本，正确答案是使用 弹簧箱模型。

所有主流浏览器和 IE11 + 都支持 Flexbox。对于 IE 10或更高版本，或 Android 4.3或更高版本，您可以使用 FlexieJS垫片。

注意标记和 CSS 是多么的简单，没有任何表格修改或其他东西。

html, body {
height: 100%;
margin: 0; padding: 0;  /* to avoid scrollbars */
}


#wrapper {
display: flex;  /* use the flex model */
min-height: 100%;
flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}


#header {
background: yellow;
height: 100px;  /* can be variable as well */
}


#body {
flex: 1;
border: 1px solid orange;
}


#footer{
background: lime;
}

<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>

In the CSS above, the 弯曲 property shorthands the 伸缩生长, 灵活的心理医生, and 弹性工作制 properties to establish the flexibility of the flex items. Mozilla has a 很好地介绍了柔性箱模型.

小开

高度: 100% 这样的相对值将使用 HTML 中的父元素作为引用，要使用高度中的相对值，您需要使您的 HTML 和 body 标记具有100% 的高度，如下所示:

超文本标示语言

<body>
<div class='content'></div>
</body>

CSS

html, body
{
height: 100%;
}


.content
{
background: red;
width: 100%;
height: 100%;
}

Http://jsfiddle.net/u91lav16/1/


提交答案