Css 将div扩展到页面底部时出现问题

当没有足够的内容时，当我将div扩展到页面底部时，当我向内容和容器添加100%的高度时，没有任何变化，当我将div添加到正文时，一切都会一团糟，我需要帮助。我试图提供尽可能多的信息，因此提供了下面的CSS和HTML

CSS: 所有这一切，很多这可能是不必要的关于这个问题对不起

body {
background-color: #111014;
background-image: url("images/bg.png");
background-repeat: repeat-x;
color: #dad8df;
font-family: tahoma;
overflow-y: scroll;
}

#container {
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}

img{
border-style: none;
}

#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
background-image: url("images/bannerbg.png");
}

#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}

#content {
background-image: url("images/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 850px;
padding-left:80px;
padding-bottom: 20px;
margin-bottom: -8px;
padding-right: 50px;
overflow: hidden;
}

#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}

#slideshow {
height: 285px;
width: 840px;
margin-left: auto;
margin-right: auto;
background-color: #2e2c35;
float: left;
margin-bottom: 20px;
}

#slideleft {
height: 38px;
width: 23px;
background-image: url("images/slideleft.png");
float: left;
margin-left: -60px;
margin-top: 104px;
}

#slideright {
height: 38px;
width: 23px;
background-image: url("images/slideright.png");
float: right;
margin-right: -50px;
margin-top: 104px;
}

#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}

.inputs {
float: right;
width: 200px;
font: .9em tahoma;
}

#largemessage {
float: right;
clear: both;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}

#submit {
margin-top: 20px;
clear: both;
float: right;
}

hr {
border-width: 3px 0 0 0;
border-style: dotted;
}

.contacterror {
margin-right: 180px;
height: 20px;
width: 300px;
color: red;
float: right;
padding-left: 20px;
}

HTML: 提前感谢您抽出时间， Callum

通常，如果您添加

body, html{
    height:100%;
}

---

容器div将从中继承。

尝试使用名为的技术。

尝试将容器div的高度设置为自动

#container { 
     height:auto;

那就够了

正如医生所说：

百分比是根据生成的长方体包含块的高度计算的。如果未明确指定包含块的高度，即它取决于内容高度，且该元素未绝对定位，则该值计算为“自动”

如果添加html，body{height:100%；}就会出错，这肯定是因为浏览器为这些元素设置了默认的边距/填充

---

对于您的问题，更简单的解决方案是将“容器最小高度”设置为“视口高度”，并将其设置为一个背景，使假内容到达底部。正如纳撒尼尔所说。

如果你再次访问该页面，你会发现页面完全乱了，不过我今天下午晚些时候会看一看，因为我认为我应该没有容器，或者将容器的高度和宽度设置为100%，并为此设置背景图像。不过我认为第一个应该更有效。我会想办法的。不管怎样，谢谢。我把它修好了，虽然它花了我一段时间，而且我没有直接使用这个方法，但它一路帮助了我，谢谢你！

#container { 
     height:auto;