0

次のような HTML ページを作成したいと考えています。

  • 水平中央に表示されます
  • ウィンドウの高さ全体に白い背景があります
  • 固定ヘッダーとスクロール可能なコンテンツが含まれています

{幅: 100%} と {高さ: 100%} に関連する 2 つの問題があります。

私のヘッダーは、親の幅の 100% であると予想されるときに、ページの幅の 100% です。背景はウィンドウの高さの 100% で表示されますが、コンテンツと共に上にスクロールします。

これら 2 つのケースで CSS が 100% の値をどのように扱うかを理解するのに少しでもお役に立てば幸いです。私は回避策を求めているわけではありません: 私はすでにそれを持っています. CSS の考え方についての洞察を求めています。

よろしくお願いします。

ジェームズ

これが問題のデモです

ベアボーン HTML は次のとおりです。

<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>

<style>
html {
    height:100%;
}

body {
    background: #666;
    height: 100%;
    margin: 0;
}

#container {
    position: relative;
    height:100%;
    background: white;
    width: 400px;
    margin: 0 auto;
    padding: 0 0;
}

#header {
    position:fixed;
    z-index:100;
    background:#ffe;
    /* width:760px; */
    width:100%;
    height:64px;
}

#content {
    position: absolute;
    left:20px;
    width:360px;
    height:360px;
    margin:64px 0 0 0;
    background:#efe;
}
</style>
</head>

<body>
<div id="container">
    <div id="header">
        Fixed header
    </div>

    <div id="content">
        Scrollable content
    </div>
</div>
</body>
</html>

4

2 に答える 2

0

ヘッダーを修正するヘッダーの位置を位置に
変更するfixedabsolute

コンテンツの高さを修正

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background:#efe;
}
#content {
    padding: 64px 20px 0;
}

posが修正されたライブ例
http://jsfiddle.net/qB4sD/1/

于 2013-01-18T18:45:26.733 に答える
0

これらの固定された位置はすべて、頭痛の種になります。

幅について: 通常、ボックス モデルが問題です。本文の高さと幅を 100% に設定してすべての CSS を開始し、ボックス モデルをリセットしてブラウザー間で一致するようにし、すべてのパディングをボックスの外側ではなく内側に適用します。

/* Set box models to match across browsers. */
* {
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 webkit-box-sizing:border-box;
 max-width:100%;
}

次に、パディングを使用してコンテナーの幅を設定します。最初にモバイルの幅、次に画面の幅をオーバーライドします。

#container {
    padding: 0px 10px;
}
        @media only screen
        and (min-width : 700px) {

            #container {
            padding: 0% 30%;
            }

        }

完全なレイアウトについては、私のサイトにアクセスしてください: http://instancia.net/fluid-sticky-footer-layout/

おそらくそのページにモバイル ビットを追加する必要があります。:)

于 2013-01-18T20:01:26.877 に答える