Question

当没有足够的内容时，我需要帮助将div扩展到页面底部，当我向内容添加100％的高度时，容器没有任何变化，当我将它添加到正文时乱成一团。我试图提供尽可能多的信息，因此提供了下面的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：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>About :: Lesley Robb Fine Art and Design</title>
<link rel="icon" type="image/png" href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="design.css" type="text/css"/>
<script src="" type="text/javascript"></script>

</head>

<body>
<div id="container">

<div id="banner">
</div>
<div id="navigation">
<a href="index.php"><img src="images/nav_home.png" alt="Home" /></a><a href="portfolio.php"><img src="images/nav_portfolio.png" alt="Portfolio" /></a><a href="about.php"><img src="images/nav_about.png" alt="About" /></a><a href="contact.php"><img src="images/nav_contact.png" alt="Contact" /></a>
</div>
<div id="content">
<div id="title">
About
</div>
You can edit this section after you Log In to the Control Panel. :)</div>
</div>

</body>
</html>

The Page As it Currently Is

An image of it for future reference once I have fixed the problem

提前感谢您的时间，卡勒姆

Answer 1

通常，如果你添加

body, html{
    height:100%;
}

container div将从中继承。

Answer 2

尝试使用名为Faux Columns的技术。

Answer 3

尝试将#container div的高度设置为自动。

#container { 
     height:auto;

应该这样做！

Answer 4

正如医生所说：

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则值计算为“auto”

http://www.w3.org/TR/CSS2/visudet.html#the-height-property

如果添加html,body { height:100%; }搞砸了，肯定是因为浏览器为这些元素设置了默认的边距/填充。

解决问题的最简单方法是将#container min-height设置为视口高度，并将其设置为假冒#content到达底部的背景。纳撒尼尔说Faux columns。

将div扩展到页面底部的问题

CSS：

HTML：

4 个答案: