0

我试图让我的列都到达页面底部。右栏比左栏长得多，但是当我将它们的高度都设置为 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;
}

这是带有全文http://jsfiddle.net/bNhng/1/的 html，大约在页面一半的地方，我的边框结束了，文本继续。

4

2 回答 2

1

这是一个帖子，其中有几种实现您想要的方法： http: //css-tricks.com/fluid-width-equal-height-columns

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

于 2012-11-01T03:29:18.993 回答
0

给你的 colomns 高度 100% 只会说他们的身高是他们父母身高的 100%，也就是说，他们的身高是#wrapper身体的 100%。而且由于您的列不是从顶部开始的，因此它们不适合窗口。

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

于 2012-11-01T00:39:21.730 回答