Question

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

我创建了一个简单的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

<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>

有人知道答案吗？

Answer 1

不需要高度％
不需要jQuery

（！）使用bottom＆amp; amp;拉伸div顶部：

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

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

Answer 2

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

这是一个全部的CSS / CSS方法，不需要固定的高度或绝对定位：

<强> CSS

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

<强> HTML

<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>

在此处查看此行动：http://jsfiddle.net/AzLQY/

这种方法的好处是页脚和标题可以增长以匹配其内容，并且正文将自动调整。您也可以选择用css限制其高度。

Answer 3

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

实施例

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

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

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

Answer 4

这允许我的表单的最小宽度居中的内容主体不会崩溃搞笑：

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/

Answer 5

使用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

Answer 6

不确定你接着是什么，但我想我明白了。

标题 - 停留在屏幕顶部？页脚 - 停留在屏幕的底部？内容区域 - ＆gt;适合页脚和标题之间的空间？

您可以通过绝对定位或固定定位来完成此操作。

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

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

Answer 7

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

在我看来，最简单，最优雅的解决方案是使用CSS calc（）。不幸的是，这种方法在ie8或更低版本中不可用，并且在Android浏览器和移动歌剧中也不可用。但是，如果您使用单独的方法，则可以尝试：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设置主要内容区域的最小高度。 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);
});

Answer 8

相对值如：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/

Answer 9

虽然这可能听起来像一个简单的问题，但实际上并非如此！

我已经尝试了很多东西来实现你想用纯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>

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

Answer 10

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

所有主流浏览器和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>

在上面的CSS中，flex属性缩短了flex-grow，flex-shrink和flex-basis属性，以确定弹性项目的灵活性。 Mozilla有good introduction to the flexible boxes model。

如何用css制作主要内容div填充屏幕高度

10 个答案: