將div擴展到頁面底部的問題
[英]Problem with extending my div to the bottom of the page
問題描述
當內容不足時，在將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>
預先感謝您的寶貴時間，Callum
4 個解決方案
解決方案1
0 2011-08-20 02:39:38
通常，如果您添加
body, html{
height:100%;
}
container div將繼承它。
解決方案2
0 已采納 2011-08-20 04:42:57
嘗試使用一種稱為Faux Columns的技術。
解決方案3
0 2011-08-20 11:55:42
嘗試將#container div的高度設置為auto。
#container {
height:auto;
那應該做！
解決方案4
0 2011-08-20 22:39:16
正如文檔所說：
相對於生成的盒子的包含塊的高度計算百分比。 如果未明確指定包含塊的高度（即，它取決於內容的高度），並且此元素不是絕對定位的，則該值將計算為“自動”
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
如果添加html,body { height:100%; } html,body { height:100%; }搞砸了，這肯定是因為瀏覽器為這些元素設置了默認的邊距/填充。
對於您的問題，更簡單的解決方案是將#container min-height設置為視口高度，並將其設置為可偽造#content到達底部的背景。 像納撒尼爾（Nathaniel）所說的人造柱 。
將div擴展到頁面底部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.