Home

Jump to bottom

solar.pom edited this page Dec 9, 2016 · 3 revisions

完整结构如下

<body>
    <header></header>
    <main class="with-header with-footer">
        <div class="main-content">Your content</div>
        <div class="sticky-footer">sticky-footer</div>
    </main>
    <footer></footer>
</body>

main and .main-content

上述结构中main和.main-content是必须的，这是用来放页面主要内容的
main的最小高度是整个屏幕

header and footer

都是可选的，如果存在，则需要在main上添加上相应的class，如header存在，则main上需要有with-header类
它们的用途是页面内固定的头部或尾部，不会随页面滚动而滚动
他们的高度是固定的，如需自定义他们的高度，你需要额外添加类样式来覆写，同时你需要修改main的padding-top|padding-bottom值,比如你要自定义header的高度，你需要在header上添加一个自定义类，比如.custom-header{ height: 100px; }, 同时你需要修改main的padding-top为100px，这个也是用自定义类去覆写。

.sticky-footer

可选的，它的存在与否对.main-content不构成任何影响
它是页面内紧跟内容后面或紧贴屏幕下边缘内容（当.main-content的内容的高度+.sticky-footer的内容的高度小于main的高度时，.sticky-footer紧贴main的下边缘，否则.sticky-footer紧跟.main-content后面）的容器，比如copyright这类内容。

Clone this wiki locally