108

所以我有一个带有页眉、主体和页脚的网页。我希望主体填充页面的 100%（在页脚和页眉之间填充 100%）我的页脚是绝对位置，底部为：0。每次我尝试将主体设置为 100% 高度或更改位置或其他东西时，它也会溢出标题。如果将 body 设置为绝对位置top: 40（因为我的标题是 40px 高），它只会向下 40px 太远，创建一个滚动条。

我创建了一个简单的 html 文件，因为我实际上无法从实际项目中发布整个页面/css。使用示例代码，即使 maincontent 主体填满了屏幕，它也会向下 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>

有人知道答案吗？

4

10 回答 10

133

These are not necessary

  • remove height in %
  • remove jQuery

Stretch div using bottom & top : 

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

check my code : http://jsfiddle.net/aslancods/mW9WF/

or check here:

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>

于 2013-09-06T19:54:18.747 回答
63

这个不需要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 限制它们的高度。

于 2014-02-08T23:09:31.590 回答
57

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

例子

.mainbody{height: 100vh;}相似地html,body{width: 100vw;}

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

**IE9+ 和大多数现代浏览器。

于 2014-12-19T21:21:24.707 回答
8

这允许我的表单具有最小宽度的居中内容主体不会折叠有趣：

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/

还有一点需要注意的是，如果您想要像您添加的代码那样的完整页面背景，请height: auto !important;从包装器 div 中删除：http: //jsfiddle.net/mdares/a8VVw/

于 2013-09-06T19:46:07.057 回答
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

于 2013-09-06T19:37:18.290 回答
3

嗯，不同的浏览器有不同的实现。

在我看来，最简单、最优雅的解决方案是使用 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% 高度，并在 100% 中包含填充box-sizing: border-box;。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);
});
于 2013-09-06T20:07:07.070 回答
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%; }

为了使其发挥最佳效果，我建议使用 % 而不是像素，因为您会遇到不同屏幕/设备尺寸的问题。

于 2013-09-06T19:48:31.413 回答
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/

于 2015-02-19T12:30:59.280 回答
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>

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

于 2013-09-06T19:52:06.157 回答
-4

这个问题是Make a div fill the height of the remaining screen space的重复问题，正确答案是使用flexbox模型。

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

请注意标记和 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>

在上面的 CSS 中，flex属性是flex-grow、flex-shrink和flex-basis属性的简写，以建立弹性项目的灵活性。Mozilla 对灵活盒子模型有很好的介绍。

于 2015-02-19T00:34:27.443 回答