我想要一个带有 %-height 属性的粘性 header 。标题下方的部分应占据页面的剩余高度,例如:标题=10% 所有其他部分至少为 90%。这类似于相关问题:CSS Sticky Header/Footer and Fully Stretched Middle Area? ,但他使用固定的 px-height 而我想要 %-height。我试图在我的部分使用边距,但这似乎不起作用。在我的部分上使用边距和 90% 的高度似乎不起作用。
目前我能够想出:http://jsfiddle.net/K9m63/ .但是有几个问题:
- 第一部分消失在标题下方。
- 由于第 1 点,部分 div 太高,因此没有占用剩余的大小。
HTML
<header>
<nav>Test</nav>
</header>
<section>
<div class="container yellow">1</div>
</section>
<section>
<div class="container pink">2</div>
</section>
<section>
<div class="container purple">3</div>
</section>
CSS
body, html {
height: 100%;
}
header {
height: 10%;
background-color: green;
position: fixed;
top: 0px;
width: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.nav-image {
vertical-align: middle;
}
section {
height: 100%;
width: 100%;
background-color: red;
}
.container {
width: 72.8125%;
background-color: blue;
margin: 0px auto;
height: 100%;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
谢谢!
最佳答案
可能的解决方案:
我已将所有部分包装成 2 个 div。
<div class="wrapper">//rest 90% of the page
<div class="wrapper2">//100% of parent
<section>
<div class="container yellow">1</div>
</section>
<section>...
</div>
</div>
CSS:
.wrapper {
min-height:90%;
height:auto !important;
position:relative;
top:10%;
}
.wrapper2 {
height:100%;
width:100%;
position:absolute;
}
此外,将 z-index:1;
添加到 header
。
已更新 fiddle在这里。
关于html - 带有 %-height 和 100% 内容部分的粘性标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25153371/