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;
}

これは全文のhtmlですhttp://jsfiddle.net/bNhng/1/ページの半分ほど下に私の境界線が終わり、テキストが続きます。

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

コロンの高さを100％とすると、その高さは親#wrapperの高さの100％、つまり体の100％の高さであると言えます。そして、あなたの列は上から始まらないので、それらは窓に収まりません。

これがあなたのコードのフィドルです：http：//jsfiddle.net/bNhng/。クラスからposition:absolute;とを削除して、両方の列の高さが同じになるように変更しました。top:125px;#rightcolumn

于 2012-11-01T00:39:21.730 に答える