css 多元素高度 100%答案

【问题标题】：css multiple element hight 100%css 多元素高度 100%
【发布时间】：2013-01-16 05:06:37
【问题描述】：

必须有十多个具有相似标题的帖子，但我发现没有一个帖子能够有效地完成我认为很简单的事情，即允许多个元素具有 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% 的屏幕高度。当我使用上面的代码时，我没有得到我想要的效果。在具有“高度”类的元素上使用固定位置时，我曾一度接近。它适用于第一部分，但较低的部分和第二部分中的文章会重叠。

【问题讨论】：

你试过display:block;或display:inline-block吗？

标签： html css height

【解决方案1】：

好吧，我终于让它与纯 CSS 一起工作了。问题不是从一个部分移动到另一个部分，而是控制子元素。

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

.child { min-height: 100%; }

有关解释，请参阅Soure

【讨论】：

【解决方案2】：

仅使用 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 部分的上方。

【讨论】：

这很好。这是我正在寻找的效果，但实用与否我宁愿只选择 CSS 并避免使用 jQuery。你对如何做到这一点有什么建议吗？谢谢。
就像我说的，您正在处理涉及基于用户交互的元素操作的功能。 CSS 根本不是为处理这些类型的操作而设计的。
我认为没有必要隐藏元素。使用当前导航可以跳转到部分 id。我们如何才能使传入部分的高度为 100%？这应该只用 CSS 就可以实现。
为了兼容性，这是最好的方法。您确保您想要显示的内容在屏幕上。您可以查看适用于现代浏览器的这个非 JavaScript 示例：jsfiddle.net/mUEYM/3 虽然它似乎不适用于 IE8 及更低版本。根据我对这方面的经验，我的建议是使用 jQuery 来获得稳定的结果。
好的，这很完美，但现在你已经达到了我无法弄清楚的部分。在您的小提琴上转到第三部分，您将在第二部分中看到一篇文章的标题和段落。如何使第二部分的子元素在导航到时也 100%，并防止其内容与下面的部分重叠？