我的問題是,對於main
格邊框沒有延伸到窗口的底部。
這裏的樣式表:
body {
margin:0px;
padding:0px;
background-color:#F7F7F7;
}
#nav {
background-color:#F7F7F7;
border-top:10px solid #89B7C4;
height:45px;
padding-top:20px;
padding-left:200px;
border-bottom:1px solid #7597A1;
}
#nav a {
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#sidebar {
float:left;
padding:15px;
}
#main {
float:left;
border-right:1px solid #7597A1;
width:800px;
margin-left:200px;
margin-top:0px;
margin-bottom:0px;
padding-top:10px;
}
這裏的頁面的源代碼:
<!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>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>home: index</title>
<link href="/stylesheets/application.css?1305224655" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/effects.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/controls.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/application.js?1304452925" type="text/javascript"></script>
</head>
<body>
<div id="nav">
#nav ·
<a href="#">link1</a> · <a href="#">link2</a> · <a href="#">link3</a> · <a href="#">link4</a>
</div>
<div id="main">
#main<br><br>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div id="sidebar">
#sidebar<br>
<a href="#">link1</a> <br> <a href="#">link2</a> <br> <a href="#">link3</a> <br> <a href="#">link4</a>
</div>
</body>
</html>
我只好把斷裂處main
看到的邊界是什麼樣子。這並不理想。即使main
div中的內容很少或沒有,我也希望顯示邊框。
如果您對如何讓它一直延伸到頁面底部有任何想法,我會非常感激。
清理CSS的任何其他提示也將不勝感激。
有關添加什麼高度:100%? – Ruben 2011-05-12 18:32:50
@Mythje我試過了,但它似乎沒有做任何事情...... – user5243421 2011-05-12 18:33:34
什麼瀏覽器,你使用和當你指定的高度:100%是在CSS文件或HTML? – VirtualTroll 2011-05-12 18:48:43