0

ここで2つ取ります。この問題はしばらくの間私を悩ませてきました。これに似た希望のレイアウトがあります。

<body>
<div id="first section">
<div id="second section">
<div id="third section">
<div id="fourth section">
<body>

基本的に私が目指しているのは (基本的に) 400% の高さのレイアウトで、各「セクション」は、いわば、すべての異なるサイズの画面の 100% の高さを占めています。各「セクション」がその25％であるボディの高さを100％に設定するなど、mix、max、およびheightプロパティを無駄に使ってたくさん遊んできました...

これは基本的なcssで行うことができますか、それとももっと技術的なものを見ていますか?

4

3 に答える 3

0

ポインタのカップル：

  • 終了bodyタグが間違っています。</body>
  • divタグは閉じられていません。
  • idのように属性を使用していますclass。

私があなたの質問を正しく理解していれば、セクションは重ならないはずです。

このjsfiddleをチェックして、探しているものかどうかを確認してください。

コード

マークアップ：

<div class="first section">First section</div>
<div class="second section">Second section</div>
<div class="third section">Third section</div>
<div class="fourth section">Fourth section</div>

CSS：

html,body {
    min-height: 100%;
    height: 100%;
}

.section {
    min-height: 100%;
}
于 2013-01-27T06:46:59.337 に答える
0

Lemme は、いくつかの提案を言います。

  1. divスタイルを継承する可能性のある の終了タグがありません。sを閉じdivます。
  2. <body>usingを閉じる必要があります</body>。
  3. div要素をラップするための親はありません。コンテンツ全体がアコーディオンになっている単一の画面のようなドキュメントが必要な場合は、固定の高さを指定して内側divの s を配置することでこれを行うことができます。しかし、 と で同じことを行うことをお勧めしULますLI。

したがって、あなたの質問に対する解決策はこのようなものかもしれません。このレイアウトにして…

<body>
    <div class="wrap">
        <div id="first section"></div>
        <div id="second section"></div>
        <div id="third section"></div>
        <div id="fourth section"></div>
    </div>
</body>

ここで、通常は画面の高さのheightを指定する必要があります。.wrapここで、セクションにも同じ画面の高さを与える必要があります。相対的に配置されたセクションを保持overflow: hidden;し、ラップに渡しdivます。

.wrap {height: 100px /* just for here */; overflow: hidden;}
.wrap .section {height: 100px /* just for here */; position: relative;}

ここで、最初のページを表示したい場合は、次の方法を使用します。

.first {top: 0;}

または、このようにすることもできます。

.section {display: none;}
.first.section {display: block;}

コードについては、このFiddleを確認してください。

于 2013-01-27T06:43:49.500 に答える