2

同様のタイトルの投稿が十数件あるはずですが、複数の要素の高さを 100% にするという簡単なことだと思っていたことを効果的に実行できたものはありませんでした。次のコードを使用します。

<html>
<head>
<style>
html, body, [role="main"] {height:100%; width:6in; overflow:hidden;}
[role="banner"] {position:fixed; top:0; left:0;}
.height {height:100%; width:100%}
</style>
</head>
<body>
<header role="banner">
<nav>
<a href="#1">Section one</a>
<a href="#2">Section two</a>
<a href="#3">Section three</a>
</nav>
</header>

<div role="main">

<section id="1" class="height">
</section>

<section id="2" class="height">
<header>
<h1>section title</h1>
</header>
<button>Navigate Articles</button>

<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>

<article class="height">
<h1>title</h1>
<p>paragraph</p>
</article>

</section>

<section id="3" class="height">
</section>

</div>

</body>
</html>

スクロールせずにナビゲートできるようにしたい。セクションに移動するリンクをクリックすると、そのセクションが画面の高さの 100% を占めます。上記のコードを使用すると、探している効果が得られません。クラス「高さ」の要素の固定位置を使用して、ある時点で接近していました。最初のセクションでは機能しましたが、下のセクションとセクション 2 内の記事が重なってしまいました。

4

2 に答える 2

0

さて、私はついにこれを純粋なCSSで動作させることができました。問題はセクション間を移動することではなく、子要素を制御することでした。

.parent { height: 100%; position: relative; overflow-y: hidden }

.child { min-height: 100%; }

説明については、このSoureを参照してください

于 2013-02-01T02:03:00.610 に答える
0

要求した機能を CSS だけで実現するのは現実的ではありません。コンテンツの表示と非表示について言及しているため、ナビゲーション リンクがクリックされたときにクリック アクションを非表示/表示機能にバインドするために、少量の JavaScript を実装する必要がある場合があります。

私はあなたのコードに以下を適用しました:

jQuery:

//Hide all .height sections at first.
$('section.height').hide();

//Show them, when their respective link is clicked.
$('nav a').click(function() {
    var $this = $(this);
        section = $this.attr('href');

    $(section).siblings('.height').hide();
    $(section).show();    
});

CSSを更新しました。

html, body, [role="main"] { 
    height:100%;
    overflow:hidden;
}
body {
    position: relative; /*so .height is relative to body when absolutely positioned*/
}

[role="banner"] {
    background: yellow;
    position:fixed;
    top:0;
    left:0;
    z-index: 999;
}

.height {
    background: red;
    height:100%;
    width:100%;
    position: absolute;
}
h1 {
    margin-top: 30px; /* to prevent menu overlap. */
}

ここで結果を確認できます: http://jsfiddle.net/mUEYM/2/

基本的な前提は、.height要素を に設定することposition: absolute;です。これにより、幅と高さが 100%でhtml、ブラウザ ウィンドウの正確な高さ/幅に拡張できます。body

ナビゲーションに値を適用して、セクションが表示されたときにセクションz-indexの上に収まるようにしました。.height

于 2013-01-31T23:38:01.927 に答える