0

3 つの領域に分割された Web ページをデザインしようとしています。

1) ヘッダー領域 2) 左側のナビゲーション ペイン 3) メイン コンテンツ領域

このために、私は現在、次の CSS クラスを使用しています。

    .Content
    {
    position:absolute;
    overflow:auto;
    top:10%;
    left:20%;
    width:80%;
    height:90%;
    }

    .Header
    {
    position:absolute;
    left:0;
    top:0;
    height:10%;
    width:100%;
    background-color:Blue;
    text-align:center;
    }

    .NavPanel
    {
        position:absolute;
        top:10%;
        left:0;
        height:90%;
        width:20%;
        overflow:auto;
        background-color:Menu;
    }

body タグの高さと幅は 100% に設定されます。

これは、自分がやりたいことを行うための非常に良い方法だとは思いません。たとえば、ブラウザーの高さを縮小すると、ヘッダー領域が比例して縮小し、最終的には消えます。また、Chrome では期待どおりにページがレンダリングされるのですが、なぜか IE8 では横スクロール バーが表示されます。

HTMLとCSSの知識があまりないので、これを行うためのより良い方法があるかどうかを知りたかっただけです. ありがとう！

4

5 に答える 5

1

ヘッダーの絶対的な高さを指定したい場合があります。次に例を示します。

.Header 
    { 
    position:absolute; 
    left:0; 
    top:0; 
    height:100px; 
    width:100%; 
    background-color:Blue; 
    text-align:center; 
    }

ヘッダーをフォント サイズの単位で指定することもできますheight: 10em(1 em は文字 "m" の幅、1 ex は文字 "x" の高さ)。

ヘッダーとコンテンツの両方の「位置」属性を削除した方がよい場合があることに注意してください。この場合、配置は相対的 (デフォルト) になり、ヘッダーのサイズに関係なく、ヘッダーの下にコンテンツが表示されます。その場合は、コンテンツの「高さ」属性を削除してください。

于 2012-09-10T07:19:40.233 に答える
1

min-heightヘッダーにa を設定し、メディア クエリを使用してみてください。

たとえば、次min-height: 2em;のようなメディアクエリを設定して使用できます。

@media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
    .content, .navPanel {
        top: 2em; bottom: 0;
    }
}

デモ

ただし、メディア クエリは IE 8 以前では機能しません。

于 2012-09-10T07:32:15.917 に答える
0

使用および拡張できる基本的なレイアウトは次のとおりです。

http://jsfiddle.net/yUCdb/

于 2012-09-10T11:30:54.097 に答える
0

試してみてください。

HTML

<div id="container">
    <div id="header">
    </div>
    <div id="sidebar">
    </div>
    <div id="viewer"></div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#header, #sidebar, #viewer {
    position: absolute;
}
#header{
    top: 0;
    width: 100%;
    height: 10%;
    background: yellow
}
#sidebar {
    top: 10%;
    width: 20%;
    bottom: 0;
    background-color: red;
    z-index:100;
}
#viewer {
    top: 10%;
    left: 20%;
    right: 0;
    bottom: 0;
    background-color: green;
}

これがライブデモです。

于 2012-09-10T11:38:53.593 に答える
0

こんにちは、あなたはこのコピーのようなページ レイアウトを探していると思います。このコードを任意のメモ帳にコピー アンド ペーストして確認してください。

<html>
<head>
    <style type="text/css">


        .Container
        {
        background-color:yellow;
        height:100%;
        weight:100%;
        }

        .inner
        {
        float:left;
        top:10%;
        height:90%;
        width:100%
        }

        .Content
        {
        float:left;
        top:10%;
        left:20%;
        width:80%;
        height:100%;
        background-color:skyblue;
        }

        .Header
        {
        float:left;
        height:10%;
        width:100%;
        background-color:Blue;
        text-align:center;
        }

        .NavPanel
        {
            float:left;
            top:10%;
            height:100%;
            width:20%;
            background-color:Menu;
        }
    </style>
</head>
<body>
    <div class="Container">
        <div class="Header"></div>
            <div class="inner">
                <div class="NavPanel"></div>
                <div class="Content"></div>
            </div>
        </div>
    </div>
</body>
</html>
于 2012-09-10T07:37:04.200 に答える