Fatal编程技术网
  • html/
  • Html css多元素高达100%

Html css多元素高达100%

html css

Html css多元素高达100%,html,css,height,Html,Css,Height,一定有十几篇类似标题的帖子，但我发现没有一篇能够有效地做到我认为简单的事情，即允许多个元素的高度达到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%。以下面的代码为例：

<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>


html，正文，[role=“main”]{高度：100%；宽度：6in；溢出：隐藏；}
[role=“banner”{位置：固定；顶部：0；左侧：0；}
.高度{高度：100%；宽度：100%}
章节标题
浏览文章
标题
段落

标题
段落
我希望能够在不滚动的情况下导航。点击一个链接，你将进入一个部分，该部分将占据屏幕高度的100%。
当我使用上面的代码时，我没有得到我想要的效果。我曾经在元素上使用“高度”类的固定位置接近某个点。它在第一部分中起作用，但是下面的部分和第二部分中的文章会重叠。

仅用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. */
}
您可以在此处看到结果：

基本前提是将
.height
元素设置为
位置：绝对。这将允许它们扩展到浏览器窗口的确切高度/宽度，前提是
html
和
body
也具有100%的宽度和高度


我对导航应用了一个
z-index
值，以确保在显示
.height
部分时它位于这些部分的上方。
好的，我终于用纯CSS实现了这一点。问题不是从一节移动到另一节，而是控制子元素


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

.child { min-height: 100%; }



有关说明，请参见此
您是否尝试过
display:block或
显示：内联块
？这很好。这是我想要的效果，但不管实用与否，我只喜欢CSS，而不喜欢jQuery。你对如何做到这一点有什么建议吗？谢谢。正如我所说，您正在处理的功能涉及基于用户交互的元素操纵。CSS完全不是为了处理这些类型的操作而设计的，我认为隐藏元素是不必要的。使用当前导航可以跳转到一个区段id。我们如何使它使进入区段的高度为100%？这应该只需要CSS就可以实现。为了兼容性，这是最好的方法。您正在确保屏幕上显示您想要显示的内容。您可以看看这个在现代浏览器中工作的非javascript示例：但在IE8及以下版本中似乎不起作用。根据我在这方面的经验，我的建议是使用jQuery来获得稳定的结果。好的，这很完美，但现在你已经达到了我无法理解的部分。用小提琴转到第三节，你会看到第二节文章的标题和段落。如何使第二节的子元素在导航到时也能100%地显示出来，并防止其内容与下面的部分重叠？