0

基本的な流体レイアウトをどのように設定するかについて簡単な質問があります。高さ40px、幅100％のヘッダーバーが上部にあります。これは見栄えがします。

次に、＃leftと#right divがあり、それぞれがフロートしています。これはかっこいいですね。どちらも高さが100％でうまく機能しますが、問題はページが40ピクセル下にスクロールすることです。これは、ヘッダーバーから40ピクセルあるためです。ヘッダーに流動的なレイアウトを使用すると、コンテンツボックスがひどく見えます。小さいまたは非常に大きい解像度で。

何か案は？

これが私のCSSです

body
{
    background: #ebebeb;
    margin: 0;
    padding: 0;
    min-width: 750px;
    max-width: 1500px;
}
#wrap
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#header
{
    background: #414141;
    height: 40px;
    width: 100%;
}
#sidebar
{
    width: 30%;
    background: #ebebeb;
    height: 100%;
    float: left;
}
#rightcontent
{
    width: 70%;
    background: #fff;
    height: 100%;
    float: right;
}
#footer
{
    width: 100%;
    background: #414141;
    height: 40px;
    clear: both;
}

そしてここに私のhtmlページがあります：

<body>
<div id="wrap">
    <div id="header">
        head
    </div>
    <div id="sidebar">
        side
    </div>
    <div id="rightcontent">
        right
    </div>
    <div id="footer">
        footer
    </div>
</div>
</body>

それは役に立ちますか:)

4

1 に答える 1

1

height: 100%;これは Web ページにとっては難しいことです。Firefox 3.5.7 のコードを見ると、#sidebarおよび#rightcontent列の高さはわずか約 1emです。これは、入力したテキストを保持するのに十分なだけであり、ページ全体の長さではありません。列は、親の明示的な高さからパーセントの高さを計算しようとしています#wrapが、% ベースの高さもあるため、失敗します (少なくとも私の Firefox では)。

さて、あなたが説明したように（追加の40pxスクロールを除いて、列は正しい高さです）、使用しているブラウザが親の#wrap100％として完全な高さを渡しているようです。です。したがって、当然のことながら、ヘッダーとフッターの高さを囲む の高さに列をサイズ変更すると、列が高すぎます。<body><body>

position: fixed; bottom: 0px; <div>構造と関連する CSS を模倣するのに十分なマークアップをページの下部に貼り付けて、ページの下部にタグを貼り付けることです。列の。

この効果を得るためにあなたのページに行ったことは次のとおりです。

<!--Add this to your HTML-->
<div id='columnfooter'>
 <div id='sidecont'></div>
    <div id='rightcont'></div>
</div>



/* And modify your CSS like this */
#sidebar, div#sidecont {
    width: 30%;
    background: #ebebeb;
    float: left;
}

#rightcontent, div#rightcont {
    width: 70%;
    background: #fff;
    float: right;
}

div#rightcont, div#sidecont {
 height:100%;
}

#footer {
    width: 100%;
    background: #414141;
    height: 40px;
    position: relative;
    bottom: 0px;
}

div#columnfooter {
 position: fixed;
 z-index: -25;
 bottom: 40px;
 height: 100%;
 background: #ebebeb;
 width: 100%;
}

はい、このように HTML を使用して空の背景列を形成すると、一種のセマンティック マークアップとスタイル マークアップが混在します。技術的にはノーノーです。しかし、CSS は HTML から明確に抽象化されており、このコードを使用すると#footer、下部にページ全体の列があり (その上のいずれかの列に 1 ページ以上のコンテンツが追加されている場合でも)、最新バージョンでも同じように動作します。 Firefox、Safari、Opera、Chrome、および IE8 の任意の解像度 (800x600 までテスト済み)。

お役に立てれば！

于 2010-01-17T11:39:50.900 に答える