html - 带有 %-height 和 100% 内容部分的粘性标题

标签 html css

我想要一个带有 %-height 属性的粘性标题。页眉下方的部分应占据页面的剩余高度,例如:header=10% 所有其他部分至少占 90%。这类似于一个相关问题:CSS Sticky Header/Footer and Fully Stretched Middle Area? ,但他使用的是固定的 px-height,而我想要 %-height。我试图在我的部分使用边距,但这似乎不起作用。在我的部分上使用边距和 90% 的高度似乎不起作用。

enter image description here

目前我能够想出: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/

    相关文章:

    javascript - 随页面滚动的内容,但位于固定位置的侧边栏内(具有阴影效果)

    javascript - 如何纠正页脚上的重叠 Accordion

    javascript - jsfiddle代码无法在Dreamweaver上运行

    html - 内联元素在悬停时变粗时会发生变化

    javascript - 关于如何找出哪些 friend 查看了您的 Facebook 个人资料的文章 : Bogus?

    javascript - extjs中的链接按钮

    javascript - IE9 <a>在直接加载的页面中有效,但在通过链接页面进入时不起作用

    html - 将div隔下另一个div

    html - 相互编号的css设计,例如1/1、1/2

    html - 在左上方对齐按钮文字