html – 如何让一个div伸展到一个固定的页脚

概述我希望我的设计的两个部分(见附图)扩展页面的整个高度.我试图创建一个小提琴,但它不会在那里工作,所以 I’ve put up a link here to demo what I mean.   我把div的高度设置为100％.但是,它不会伸展到固定的页脚. #found-results { height: 100%px; margin-bottom: 50px; bac 我希望我的设计的两个部分(见附图)扩展页面的整个高度.我试图创建一个小提琴,但它不会在那里工作,所以 I’ve put up a link here to demo what I mean.

我把div的高度设置为100％.但是,它不会伸展到固定的页脚.

#found-results {     height: 100%px;    margin-bottom: 50px;    background: #CCC;}

我也想要绿色的盒子伸展到页脚. CSS是：

.main {    wIDth: 606px;    float: left;    padding: 15px 0 0 16px;    position: absolute;    background: green;    margin-left: 383px;}

现在,如果我添加高度：100％;对它来说,它似乎起作用,但是如果其中一个选项卡包含很多文本,那么它的扩展性就不够了.

任何帮助将不胜感激.

解决方法 等高列

在某种程度上,棘手的部分不是固定的页眉和页脚,或100％的高度;棘手的部分是等高列.通常,假冒等高列(例如,将grey-green background image添加到父容器)最好.与真实的等高列相比,这样做通常允许代码更简单,更灵活,更稳定.如果这个网站的布局过于笨拙,请尝试伪装等高列(如demo所示),看看是否有助于布局变得更易于管理.

据说,真正的等高列的基本选择如下：

> HTML表
> CSS tables
> CSS3 flexbox
> CSS3 grids
> @R_403_3715@或jquery

这是一个使用CSS表的真正等高列的JSFiddle demo.左列具有非常高的内容,右列具有较少的内容.在IE10,firefox,Chrome,Safari和Opera中,该演示测试正常;然而,这可能仅适用于相对简单的布局.

这是一个similar demo using HTML tables,万一需要支持ie8.

伪造等高列

这是another demo,通过添加一个2-color background image来制作等高列.该演示在IE10,Safari和Opera中测试也很好.然而,与以前的版本不同,它更有可能支持复杂的页面布局.

HTML

<div ID="header">...</div><div ID="content" >    <div >...</div>    <div >...</div></div><div ID="footer">...</div>

CSS

HTML,body {    height: 100%;    ...}#header {    position: fixed;    top: 0;    height: 120px;    ...}#footer {    position: fixed;    bottom: 0;    height: 60px;    ...}#content {    min-height: 100%;    padding: 120px 0 60px 0;    -webkit-Box-sizing: border-Box;       -moz-Box-sizing: border-Box;            Box-sizing: border-Box;    background: url(some-two-color-background.png) repeat-y 53.6% top;    ...}#content .column1 {    float: left;    wIDth: 250px;}#content .column2 {    float: left;    wIDth: 350px;}

注意：通过设置background-position属性来控制背景图像的明显列宽.这允许使用相同的通用背景图像来伪造任何显式宽度(px或％)的两列.或者,可以使用具有精确列大小的自定义背景图像来简化CSS.

总结

以上是内存溢出为你收集整理的html – 如何让一个div伸展到一个固定的页脚全部内容，希望文章能够帮你解决html – 如何让一个div伸展到一个固定的页脚所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。