如何使用CSS使主内容div填满屏幕高度

Question

如何使用CSS使主内容div填满屏幕高度

122

我有一个包含页头(header)、主体(mainbody)和页脚(footer)的网页。我想让主体充满整个页面（在页头和页脚之间填充100%）。

我的页脚被设置为绝对定位，带有bottom:0的属性。每次我尝试将主体设置为100%高度或更改其位置时，它也会溢出页头。如果我将主体设置为绝对定位，并指定top:40（因为我的页头高度为40px），它会向下移动40像素，从而创建一个滚动条。

鉴于实际项目中无法发布整个页面/ CSS，我创建了一个简单的HTML文件。使用样例代码，即使主内容区域填充了整个屏幕，它也会向下移动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>

有人知道答案吗？

- user2713516

这个问题很广泛，您需要的是Mac上的IE5.5、IE6、IE7、IE8、IE9、当前浏览器（IE10、Chrome、FF、Opera、Safari）还是其他什么？ - Chad

1

只是一个小提示：避免在网站的主要部分（标题、正文、页脚等）使用绝对定位，因为这会导致在移动浏览器和旧浏览器上出现非常有趣的结果。 - evilReiko

我会记住的 :) - user2713516

10个回答

65

没有必要使用 JavaScript、绝对定位和固定高度。

以下是一种全部使用 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限制它们的高度。

- Mark Murphy

内容区域无法获得滚动条：http://jsfiddle.net/AzLQY/517/ - Junle Li

@JunleLi 如果你想让它滚动，你可以这样做：http://jsfiddle.net/geprhxxv/1/ - Mark Murphy

1

谢谢您的回复。我想要一个可以滚动主区域且没有标题和页脚魔数的解决方案。我做了很多搜索，但最终放弃了。无论如何，非常感谢您的解决方案，它给了我启示！ :) - Junle Li

@JunleLi 这个解决方案中没有魔法数字。所以听起来这就是你要找的，还是说我理解错了？ - Mark Murphy

嗨，@Mark。那是一个不错的方法。但它在IE上不起作用。:( 感谢您的帮助！ - Junle Li

59

有一个CSS单位叫做“视窗高度/视窗宽度”。

例如：

.mainbody {height: 100vh;} 同样地，html,body{width: 100vw;}

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

**IE9+和大多数现代浏览器支持该特性。

- joyBlanks

2

这是一个不错的解决方案，但vh在一些现代浏览器中不被支持，例如iOS 7.1 Safari和Android Chrome <4.4。 - 1800 INFORMATION

3

在移动浏览器上，我发现vh单位存在一个问题。URL地址栏似乎被计算为整个vh。因此，当您滚动并且URL地址栏折叠时，它看起来像是一个故障，并且网站尝试重新计算。就表现而言，这很糟糕。有没有人有解决方案？ - Eshwaren Manoharen

1

这会给元素设置屏幕尺寸，但并不能保证它会填满整个屏幕，或者根本不在屏幕上显示。 - jpaugh

9

这可以让内容居中，同时为了避免表单出现奇怪的折叠，需要设置最小宽度：

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 中删除 height: auto !important; ：http://jsfiddle.net/mdares/a8VVw/

- Matthew

6

使用top: 40px和bottom: 40px（假设您的页脚也是40像素），并没有定义高度，您可以使其正常工作。

.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

- Tricky12

-1 代表什么？这个运行良好。 - Tricky12

我认为可能是因为他的页眉和页脚有固定的高度。 - Chad

页头和页脚的高度已经固定，因此在缩放时，10%“从顶部”将无法起作用。 - user2713516

现在检查一下，它可以与固定高度的页眉和页脚一起工作。 - Tricky12

那不会随着内容扩展。 - Chad

内容可以根据mainBody包装器的大小进行调整。他没有提到这是一个问题，只是body包装器溢出了。 - Tricky12

3

不同浏览器有不同的实现方法。

在我看来，最简单、最优雅的解决方案是使用CSS calc()。不幸的是，这种方法在ie8及以下版本中不可用，并且也不适用于安卓浏览器和移动版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);
}

我提供的备选解决方案包括粘性底部方法和box-sizing属性。这个方法可以使body元素填充其父元素的100%高度，并且使用box-sizing: border-box;属性将padding包含在内。具体请参考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设置主内容区域的最小高度。 http://jsfiddle.net/uRskD/2/

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

以下是JS代码：

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

- Chad

@Torr3nt 还缺乏跨浏览器支持，特别是旧版浏览器和移动浏览器。 - evilReiko

1

我不确定你需要什么，但我想我理解了。

一个页头 - 保持在屏幕顶部？一个页脚 - 保持在屏幕底部？内容区域 -> 适应页脚和页头之间的空间？

您可以通过绝对定位或固定定位来实现此目的。

以下是使用绝对定位的示例: 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%; }

为了使其效果最佳，我建议使用百分比而不是像素，因为在不同的屏幕/设备尺寸上会遇到问题。

- TyMayn

1

相对值，比如：height:100%会使用HTML中的父元素作为参考，要在高度上使用相对值，你需要让html和body标签拥有100%的高度，就像这样：

HTML

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

CSS

html, body
{
    height: 100%;
}

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

http://jsfiddle.net/u91Lav16/1/

- Adriano Moura

0

虽然这听起来可能很简单，但实际上并不是！

我尝试了许多方法来使用纯CSS实现你想要做的事情，但所有的尝试都失败了。但是……如果你使用JavaScript或jQuery，有一个可能的解决方案！

假设你有这个CSS：

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

假设您有以下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>

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

- evilReiko

-2

这个问题是如何使div填充剩余屏幕空间的重复，正确的答案是使用flexbox模型。

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

请注意标记和CSS的简单性。没有表格hack或其他任何东西。

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>

在上面的CSS中，flex属性将flex-grow、flex-shrink和flex-basis属性简写为弹性盒子项的灵活性。Mozilla有一个关于弹性盒模型的良好介绍。

- Dan Dascalescu

9

flex 属性的支持仍然非常有限。可以把它作为答案发布，但不要自以为是地让别人删除他们的答案，因为你的答案更好。参考链接。 - Cerbrus

4

@Cerbrus: "极其有限"这个词是指所有常青浏览器和IE11+存在什么限制？我还提到了FlexieJS的插件。我不在乎是否“我”的更好，正如你从中得到这里的问题中推荐Pebbl的答案一样。 - Dan Dascalescu

2

@ArunPrasadES：因为这是对这个问题的现代解决方案。 - Dan Dascalescu

1

请注意，在2023年，即使它已经被投票淹没，这仍然是正确的答案。此外，您可以直接使用内置的“header”、“main”和“footer”实体，并将“flex”规则应用于“body”元素，而不是在div上使用类或ID。根据@Cerbrus的链接，尽管偶尔需要进行实现说明，但此解决方案在所有现有市场份额的浏览器中都得到支持。 - Jonathan E. Landrum

既然你要@我，@Jonathan：嗯，flexbox仍然非常不稳定，并且往往会对内部元素的布局造成太多干扰。此外，当我最初写下这条评论时，flex确实不是一个好的选择。 - Cerbrus

哦，当你写下你的答案时，Flex绝对是一个糟糕的选择。我注意到自那时以来发生了很多变化，并试图引起注意，即页面上最好的答案也是最被踩的答案之一。 - Jonathan E. Landrum

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sudhan kantharuban · Accepted Answer

这些并不是必需的

去掉百分比高度
去掉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>