2

ピクセルベースの測定を使用すると完全に機能する次のコードがありますが、代わりにパーセンテージを使用したいのですが、パーセンテージを使用すると、下に添付されている写真のようにレイアウトが損なわれます

ここに画像の説明を入力

上の画像を見るとわかるように、本文のコンテンツとサイトのキャッチフレーズが重なっています。以下の順序付けられていないリストとともに、青色のセクション内にキャッチフレーズを入れる必要があります。ピクセルベースのレイアウトでは問題なく動作していましたが、パーセンテージを適用するとめちゃくちゃになりました。

これが私のHTML 5ベースのマークアップです

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <link href = "site.css" rel = "stylesheet">
    <title>Test Page - Test Title of my homepage</title>
</head>
<body>
    <header>
        <div id = "SiteTitle">
            <h1>This is a test !</h1>
        </div>
        <div id = "Tagline">
            <p>This is a test tagline of the website</p>
        </div>
        <nav>
            <div id = "MainMenu">
                <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </div>
        </nav>
    </header>
    <section>
        <div id = "MainContent">
            Main Site Cotent
        </div>
    </section>
    <footer>
        The Footer
    </footer>
</body>
</html>

そしてここにCSSファイルがあります

*{
margin: 0;
padding: 0;
height: 100%;
}
header{
background-color: blue;
height: 15%;
}
nav{

}
#SiteTitle{
color: black;
}
#Tagline{
    color: black;
}
#MainMenu ul li{
color: black;
}
#MainContent{
height: 70%;
}
footer{
background-color: green;
height: 15%;
}
4

5 に答える 5

3

メイト、

% (パーセンテージ) 値を持つ高さプロパティは、ピクセル値として機能しません。高さのパーセンテージは、親要素の高さに基づいて計算されます。最初は、ボディにはビューポート全体としての高さがありません。

必要な最初のルールは次のとおりです。

html, body {
    height:100%;
}

body の高さを vievwport の高さと等しくするには、html と body セレクターを一緒にする必要があることに注意してください。

ヘッダー、セクション、フッターの viewprot の高さを分割したい場合、最初に、これらの要素は body の直接の子でなければなりません。次に、パーセンテージ単位のみが高さプロパティで機能します。

したがって、あなたの構造は次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Test Page - Test Title of my homepage</title>
    <link href="site.css" rel="stylesheet" /> 
</head>
<body>
    <header>
        header
    </header>
    <section>
        section
    </section>
    <footer>
        footer
    </footer>
</body>
</html>

およびレイアウト用の CSS:

*{
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
}

header{
    background-color: blue;
    height:25%;
}

section{
    height:65%;
}

footer{
    background-color: green;
    height:10%;
}

そして、あなたは幸せな柔軟な高さのレイアウトを持っています.

画面の高さが非常に低いとオーバーラップの問題が発生するため、これでは問題は解決しません。本文または目的のヘッダー/セクション/フッター要素に min-height を適用することで修正できます。

例えば：

header {
    min-height:80px;
}

追加のアドバイス:

  • グローバルセレクターを使用しないでください - すなわち *
  • 代わりに、Normalize CSSを使用します
  • パーセンテージ ベースの高さのレイアウトはベスト プラクティスではありません。

簡単なデモ: http://jsfiddle.net/shekhardesigner/9FBxd/

于 2013-09-30T11:40:37.203 に答える
1

それらをブロックとしてインラインにする必要があります。

#SiteTitle, #Tagline, header nav{
   display inline-block;
}

このようにして、それらは互いに隣り合わせに配置されます:)vertical-align: top;それらをすべて上に揃えるために使用したい場合があります。

また、他のすべての返信で述べられているように、を使用*{height: 100%;}しないでください。これは、修正するよりもはるかに多くのことを台無しにします (現在の問題を 1 つ参照してください)。

margin および padding 属性についても同様です。一部の要素には、削除したくないデフォルトのパディング/マージンがあります (2 つの段落の間の小さなスペースを考えてください)。体をすべてトリミングしたいと思います。そのために使用html,body{margin:0;padding:0;}してください:)

于 2013-09-30T11:28:21.170 に答える
0

CSSを次のように変更するだけです。

* {
    margin: 0;
    padding: 0;
}

削除するheight:100%

于 2013-09-30T11:24:59.587 に答える
0

height:100%から削除

*{

margin: 0;
padding: 0;
}

追加

body{height:100%;width:100%}

ここにフィドルがあります

フィドル

于 2013-09-30T11:25:36.327 に答える
0

を使用*{ height:100%;すると、すべての要素が 100% になります。ではなく 100% を使用し<body>ます。

これにより、ボディの高さが 100% になり、残りの要素はパーセンテージ ベースの測定値を使用できるようになります。

于 2013-09-30T11:24:13.973 に答える