1

パーセンテージを使用しているため、常に画面いっぱいに表示される Web サイトを作成する必要があります。

上に固定headerの10%高さを置いています。そして、私はのをsection与えます。彼らはお互いに真っ直ぐであると推測するでしょうが、そうではありません. 誰か助けたいですか？margin-top10%

私は次のHTMLを持っています:

<header></header>
<section></section>

非常に単純なCSSを使用して：

html, body {
    height:100%;
}

header, section {
    width:100%;
}

header {
    height:10%;
    background:red;
    position:fixed;
    top:0;
    left:0;
}

section {
    background: blue;
    height:90%;
    margin-top:10%;
}

これはhttp://jsfiddle.net/DanielApt/SeJfu/でライブで見ることができます。

4

4 に答える 4

1

考えられる解決策:

セクションから削除marginします。書くだけ

section {
    background: blue;
    height:90%;
    top:10%;
    position:relative;
}

これがフィドルです。

于 2013-10-26T09:08:31.563 に答える
1 
section {
    background: blue;
    height:90%;
    margin-top:10%;
    position:fixed;
    left: 0;
}

トリックを行う必要があります（つまり、位置を固定して左の値をダンプする必要があります）

于 2013-10-26T09:09:33.883 に答える
1

これがあなたが探しているものかどうかを確認してくださいhttp://jsfiddle.net/Mohinder/nj2UB/

HTML

<header></header>
<section></section>

CSS

html, body {
    height:100%;
    margin:0px;
    padding:0px;
}

header, section {
    width:100%;
}

header {
    height:10%;
    background:red;
    position:fixed;
    top:0;
    left:0;
}

section {
    background: blue;
    height:90%;
   top:10%;
    position:relative;
}
于 2013-10-26T09:12:07.380 に答える
1

問題が解決したことを確認しました。セクションから「余白」を削除します。

HTML

<header></header>
<section></section>

CSS

html, body {
    height:100%;
    margin:0px;
    padding:0px;
}

header, section {
    width:100%;
}

header {
    height:10%;
    background:red;
    position:fixed;
    top:0;
    left:0;
}

section {
   background: blue;
    height:90%;
    top:10%;
    position:relative;
}
于 2013-10-26T09:34:44.560 に答える