需要在网页上设置最小高度

Question

需要在网页上设置最小高度

javascripthtmlcss

3

我想建立一个由三部分组成的页面：

固定高度的页眉
可自适应的主要部分
固定高度的页脚

我希望页面有一个最小高度，以便页脚底部与窗口底部齐平。即使主要部分的内容太少，我也希望中间的主要部分能够拉伸。

如果有CSS解决方案，我宁愿使用CSS而不是JavaScript来实现。

我尝试了各种版本的以下代码，但主要部分只会扩展到其内容所推动的范围：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
    body, header, main, footer {
        width:100%; 
        display:block;
    }
    body{
        display:block;
        position:relative;
        height:100%;
        min-height:100%; 
        padding:0;
        margin:0;
    }
    header{
        background-color:#ccc;
        height:100px;
    }
    footer{
        height:100px;
        background-color:#ccc;
    }
    main {
        border:1px solid #f00;
    }
    #wrapper{
        height:100%;
        min-height:100%;
    }

</style>
</head>
<body>
    <div id="wrapper">
        <header>
            Header
        </header>
        <main>
            Main
        </main>
        <footer>
            Footer
        </footer>
    </div>
</body>
</html>

- Eamonn Gormley

1个回答

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

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

- Kinburn101 · Accepted Answer

我相信类似这样的东西会起作用。演示

<div class="container-main">
<div class="header">header</div>
<div class="wrapper">
    <div class="container-fluid">
        <div class='one '>one</div>
        <div class='two '>two</div>
        <div class='three '>three</div>
    </div>
</div>
<div class="footer">footer</div>
</div>

CSS：

html, body {
color:#fff;
width:100%;
height:100%;
margin:0;
}
.container-main {
display:table;
width:100%;
height:100%;
box-sizing:border-box;
background:#efefef;
padding:4px;
border:1px solid red;
}
.wrapper {
display:table-row;
height:100%;
}
.container-fluid {
display:table-cell;
padding:10px;
background:#e1e1e3;
border:1px solid blue;
}
.one {
background:#888;
}
.two {
background:#666;
}
.three {
background:#555;
}
.one, .two, .three {
height:80px;
}
.footer {
background:#000;
display:table-row;
}
.header {
background:#000;
display:table-row;
}