嘿，我现在有以下网站(截图):
http://postimage.org/image/25ahko3b8/
我想要的是让我的右列一直延伸到主体的底部(即使没有足够的内容将其向下推)。
如何使用我的 CSS 实现这一点？
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links"><a href="index.html">Home</a></li>
<li class="links"><a href="planning.html">Location</a></li>
<li class="links"><a href="construction.html">Facilities</a></li>
<li class="links"><a href="evaluation.html">Attractions</a></li>
<li id = "endlink"><a href="evaluation.html" id="lastlink">Bookings</a></li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
CSS:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
padding: 0;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-left: 1px solid #7f7f7f;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
谢谢大家! :)
最佳答案
为此，请将 rightcolumn 背景色应用于 mainc div。将左栏内容包裹在一个 div 中，并给它一个白色背景。这将允许右列向下延伸到左列。
html
<div id="mainc">
<div id="leftcolumn">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located...</p>
<div class="slideshow"> ... </div>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>hghadgadgadg</p>
</div>
</div>
关于css - 右栏不会到达正文底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7466617/