CSS布局帮助 - 将div拉伸到页面底部

我试图创建一个带有“标题”区域的布局，其中包含徽标和一些链接，然后是需要扩展到页面底部的内容区域。这是我陷入困境的地方。CSS布局帮助 - 将div拉伸到页面底部

我已经用一个容器div包含了标题和内容，其高度为100％，这工作正常。但我不能让内容div伸展到容器div的底部，因为它的最小高度为100％似乎占用了页面主体的高度，所以我最终得到了一个滚动条在页眉的顶部被标题占据。

这里有一个线框这使得希望什么，我试图实现更清楚一点......

Mockup

下面是一个简单的CSS例子，这个工作，除了有一直处于一个滚动条这似乎是标题区域的高度...

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    color: #fff; 
} 
body { 
    background-color: #000; 
} 
#container { 
    position: relative; 
    margin: 0 auto; 
    width: 1000px; 
    min-height: 100%; 
} 
#header { 
    padding-top: 26px; 
} 
#logo { 
    width: 194px; 
    height: 55px; 
    margin: 0 auto; 
    background-color: #fff; 
} 
#content { 
    margin-top: 10px; 
    position: absolute; 
    width: 1000px; 
    min-height: 100%; 
    background-color: #fff; 
}

来源

2010-09-07 Accelebrate

只是测试我的答案就这一个，只要你的头有一个固定的高度工作正常。 – 2010-09-07 09:52:33

感谢您的帮助。刚刚更新了我的示例，为我的标题添加了固定高度，并将内容的“顶部”值设置为标题和边距的高度。不过，我仍然看到一个滚动条。 – Accelebrate 2010-09-07 10:19:38

删除内容的最小高度div – 2010-09-07 10:57:28

使容器的div位置：relative和content div位置：绝对。然后给内容div顶部：<标头高度>和底部：0

不能立即测试此权限，但我认为像这样的应该工作。

来源

2010-09-07 09:11:47

或者，你可以在加载后使用javascript来解决这个问题，但那不是我的首选选择（虽然我不得不在这些网站中使用这种方法） – 2010-09-07 09:54:25

这应该在IE7 +中起作用。看看我的[示例100％高度布局]（http://jsfiddle.net/thirdender/q9yL6/）。 – thirdender 2012-08-20 20:04:08

http://jsfiddle.net/CZayc/

这部作品通过包装的标题和正文中一个div推页脚下来

的index.html

<div id="wrap"> 
    <div id="header"> 
     header 
    </div> 
    <div id="main"> 
     main<br/>main<br/>main<br/>main<br/>main<br/>main<br/> 
    </div> 
</div> 
<div id="footer"> 
    footer 
</div>

的style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
#header { 
    border-top:20px solid #fff; 
    height: 33px; 
    line-height: 33px; 
    text-align: center; 
    background-color: green; 
} 
html { height: 100%; } 
body { height: 100%; width: 90%; margin: auto; } 
#wrap { min-height: 100%;background-color:gray;} 
#main { 
    overflow: auto; 
    padding-bottom: 53px; /* must be same height as the footer */ 
    background-color: red; 
    height: 90% 
} 
#footer { 
    position: relative; 
    margin-top: -53px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: center; 
    background-color:blue; 
}

来源

2010-09-07 15:46:00

这只是一个链接，而不是答案。你能从链接中获取一些信息吗？ – Joe 2015-07-03 22:51:25

限制：标题高度应该是静态的，用a绝对高度。

内容高度是动态的。

CSS代码：

* { 
    padding:0; 
    margin:0; 
} 
html, body { 
    height: 100%; 
    color: #fff; 
} 
#header { 
    background: red; 
    position: absolute; 
    z-index:20; 
    height: 7em; 
    overflow:hidden; 
    width:100%; 
} 
#content { 
    background: blue; 
    position: absolute; 
    top: 0; 
    padding-top: 7em; 
    min-height: 100%; 
    box-sizing: border-box; 
}

内容一路延伸至底部，即使文字很短。

当内容的文本比我们的窗口高度长 - 我们得到的自动滚动

例子： http://jsfiddle.net/fixit/p3B4s/3/

来源

2014-07-13 09:23:58

CSS布局帮助 - 将div拉伸到页面底部

回答

相关问题