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% 的屏幕高度。当我使用上面的代码时，我没有得到我想要的效果。在具有“高度”类的元素上使用固定位置时，我曾一度接近。它适用于第一部分，但较低的部分和第二部分中的文章会重叠。

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;. 这将允许它们扩展到浏览器窗口的确切高度/宽度，前提是html并且body还具有 100% 的宽度和高度。

我z-index对导航应用了一个值，以确保在.height显示部分时它位于部分上方。

于 2013-01-31T23:38:01.927 回答