3

ヘッダー、コンテンツ、フッターのdivの3行をベースにしたレイアウトを確立しようとしています。最も外側の2つのdivは固定の高さです。中央のdivは流動的で、ブラウザ画面の高さに適応する必要があります。

レイアウトのサンプル

適切なCSSでこれに取り組む方法を誰かが私に正しい方向に向けることができますか？今のところ、私はまだjavascriptソリューションに興味がありません。 CSSは明確な答えを提供しないので、javascriptソリューションは卓越しています！

これは私がどこまで来たかです：

<div id='header'>Header</div>
    <div id='content'>
        <div id='innerContent'>
            This is the fluid part
        </div>
    </div>
<div id='footer'>footer</div>

css：

#header {
    position:absolute;
    top:0px;
    left:0px;
    height:100px;
    z-index:5;
}
#content {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    z-index:2;
}
#innerContent {
    margin-top:100px;
    height:100%;
}
#footer {
    height:400px;
}
4

3 に答える 3

4

編集：すみません、恥ずかしい思いをします。１年ほど前に似たようなものを作りましたが、最初はこの状況に合わせることができないと思いました。どうやらそうでした。

他の人がすでに言っているように、絶対に配置することでフッターdivを一番下に置くことができます。問題は、コンテンツdivが大きくなったときにその位置を調整することです。フッターは絶対に配置されているため、コンテンツdivのフローに従わず、コンテンツが拡張されても同じ場所にとどまります。

秘訣は、絶対に配置されたdivですべてをラップすることです。コンテンツが大きくなると拡張され、フッターdivはドキュメントの境界線ではなくラッパーの境界線に従って配置されます。

これがコードです。コンテンツdiv内に一連のタグを配置してみると<br />、すべてが調整されていることがわかります。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #wrapper {
        min-height: 100%;
        min-width: 100%;
        position: absolute;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        background-color: gray;
        margin-bottom: 50px;
    }

    #footer {
        height: 400px;
        min-width: 100%;
        position: absolute;
        bottom: 0px;
        margin-bottom: -350px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id='header'>Header</div>
        <div id='content'>
            Content

        </div>
        <div id='footer'>footer</div>
    </div>
</body>
</html>

オリジナル： 悲しいことに、cssにはこれを行うためのクリーンな方法がありません。ビューポートの高さ（hと呼びます）がわからないため、h-100-50を計算できません。ほとんどの人がフッターdivの50pxを表示できるように、Webサイトを構築する必要があります。これを行う方法は、コンテンツdivの最小の高さを設定することです。

min-height値は、標準のビューポートの高さから導出する必要があります。Google Labsは、訪問者のビューポートサイズに関するデータを公開し、ここで優れた視覚化を行いました：http: //browsersize.googlelabs.com/

私は自分のビューポート用に設計しました。これは高さ620pxです（グーグルによると、このビューポートの高さは約80％です）。したがって、コンテンツdivの最小の高さは620-100-50=470ピクセルである必要があります。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        min-height: 470px;
        background-color: gray;
    }

    #footer {
        height: 400px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id='header'>Header</div>
    <div id='content'>
        Content
    </div>
    <div id='footer'>footer</div>
</body>
</html>
于 2012-04-15T01:11:46.427 に答える
1

私があなたの問題を正しく理解していれば、これはあなたを正しい方向に導くかもしれないと思います。

http://jsfiddle.net/mikevoermans/r6Saq/1/

于 2012-04-15T02:19:12.603 に答える
0

私はそれを突くつもりです。スクリーンショットを正しく読んだかどうかはわかりませんが、コンテンツdivの高さを50〜100ピクセルに設定しました。

これが私のjsfiddleです：http：//jsfiddle.net/AX5Bh/

divを制御するためmin-heightにmax-heightCSS属性を使用しています。#innerContent

結果ウィンドウを水平方向に展開すると、一部のテキストが強調表示されていることがわかります。#innerContentコンテンツがdivより大きい場合は非表示にするように設定しました。あなたは何か違うものが欲しいかもしれません。<em>それが機能していることを示すために、タグ付きのテキストのみを強調表示しmax-heightました。

最初の文以外のすべてのテキストを削除すると、高さが50pxになります。

min-heightおよびのブラウザサポートへのリンクは次のとおりです：http max-height：//caniuse.com/#search=max-height

于 2012-04-15T00:50:35.200 に答える