Question

嘿，我现在有以下网站（截图）：

我想要的是我的右栏一直延伸到身体的底部（即使没有足够的内容将其推下来）。

如何使用我的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;
}

谢谢你们！：）

Answer 1

为此，请将rightcolumn背景颜色应用于mainc div。将左列内容包装在div中并为其指定白色背景。这将允许右列向下延伸到左列。

演示：http://jsfiddle.net/4Q96Z/

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>

Answer 2

如果您可以添加实际页面而不是图像，那就太棒了，但只需这样做：

首先，你需要两个列的容器div，假设你将它命名为容器，然后CSS将如下所示：

#container{width:YOUR_WIDTH; height:auto; overflow: hidden;}

然后我们需要设置列。如果你知道主列总是比侧边栏长，那么你不需要做任何事情，否则将这个CSS应用于两个列：

#rightcolumn {
padding-left: 3px;
float: left; padding-bottom:50000px; margin-bottom:-50000px;
background-color: #dad8bf;
width: 290px;
border-left: 1px solid #7f7f7f;}

这是我几年前发明的一种技术，并且很有名。秘诀是添加相同的填充和负边距值。由于容器中有溢出，因此该列将调整为可用的最大高度（由更长的列“推”容器框的限制确定），其他一切将被隐藏

右栏不会到达身体的底部

2 个答案: