Question

我正在尝试让我的列都到达页面底部。右列比左列长得多，但是当我将它们的高度设置为100％时，它不会覆盖整个页面。

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Primarch - Roboute Guilliman</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="stylesheet.css">
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                 <h1>Roboute Guilliman</h1>

                <div id="breadcrumb"><a href="index.html">Home</a> > <a href="index.html">Primarchs</a> > <a href="index.html">Roboute Guilliman</a>

                </div>
            </div>
            <div id="leftcolumn">   <a href="index.html">Home</a>
 <a href="#About">About</a>
 <a href="#Early_Years">Early Years</a>

            </div>
            <div id="rightcolumn">
                <div class="content"></div>
            </div>
        </div>
    </body>
</html>

CSS：

html, body {
    font-family:Verdana, Arial, sans-serif;
    background-image: url(data-slate.jpg);
    background-repeat: repeat;
    color: #00CC00;
    width:100%;
    height:100%;
}
a {
    color: #FFFF00;
}
.ImageBorder {
    border: #00CC00 2px solid;
}
#wrapper {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    margin:0 auto;
}
#leftcolumn {
    float: left;
    width: 165px;
    height:100%;
    position:relative;
    border: #00CC00 3px solid;
    padding-top: 30px;
}
#rightcolumn {
    position:absolute;
    height:100%;
    left: 170px;
    right:0px;
    top:125px;
    border: #00CC00 3px solid;
    padding:15px;
}
#header {
    padding: 10px;
    text-align:center;
    border: #00CC00 3px solid;
}
.content {
    padding: 20px 20px -10px 20px;
}
#floatright {
    margin: 10px;
    float: right;
}
#footer {
    font-size:70%;
    position:relative;
    left:30%;
    bottom:0px;
}
#leftcolumn a {
    margin: 30px;
}
#breadcrumb {
    text-align: left;
}

这是html，全文http://jsfiddle.net/bNhng/1/大约在页面的一半处我的边界结束，文字继续前进。

Answer 1

这是一篇有关实现您想要的方法的帖子： http://css-tricks.com/fluid-width-equal-height-columns

但最简单的方法就是做假柱：http://www.alistapart.com/articles/fauxcolumns/

Answer 2

给你的colomns身高100％只会说他们的身高是他们父母身高的100％，身高是#wrapper，高度为身体的100％。因为你的colomns不是从顶部开始，所以它们不适合窗户。

以下是您的代码的小提琴：http://jsfiddle.net/bNhng/。我通过从position:absolute;类删除top:125px;和#rightcolumn来修改它以使两个列的高度相同。

等于CSS的CSS

2 个答案: