如何使用css使div填充整个页面高度？

Question

我试图将网页中间部分的底部（div main）向下延伸到整个页面，覆盖底部的背景。

以下是网页的网页和CSS代码文件的图像：

body {
    background: url('black_gradient.png')repeat-x;
    text-align: center;
}
#main {
    width: 1000px;
    background: url('brown gradient.jpg')repeat-x;
    margin: 25px auto;  
    border: solid 2px #ff3819;
    border-bottom: solid 0px;
    padding: 10px;
}
h1 {
    text-align: center;
    font-family:"Times New Roman";
    font: 24pt;
    color: #000000;
}
hr {
    height: 2px;
    background-color: #000000;
}
p {
    font-family:"Calibri";
    font-size: 12pt;
    text-align: left;
    text-indent: 48px;
    color: #000000;
}

Answer 1

您可以使用#main {min-height: 100vh}。 vh单位是视口（窗口）高度的1％。

Answer 2

只是一个旁注，但vh并不总是与每个浏览器相处。我特别在IE中遇到了问题。如果这对您很重要，您也可以使用以下规则：

position: fixed;
top: 0;
height: 100%;