Sticky Footer
经典的使用实现上-中-下布局。
当页面内容高度小于可视区域高度时，种常footer 吸附在底部；当页面内容高度大于可视区域高度时，用布footer 被撑开排在 content 下方
demo link
<body> <header>HEADER</header> <article>CONTENT</article> <footer>FOOTER</footer> </body> body { min-height: 100vh; display: flex; flex-direction: column; } article { flex: auto; }
Fixed-Width Sidebar
在上-中-下布局的使用实现基础上，加了左侧定宽 sidebar。种常
demo link
<body> <header>HEADER</header> <div class="content"> <aside>ASIDE</aside> <article>CONTENT</article> </div> <footer>FOOTER</footer> </body> body { min-height: 100vh; display: flex; flex-direction: column; } .content { flex: auto; display: flex; } .content article { flex: auto; }
Sidebar
左边是亿华云计算用布定宽 sidebar，右边是使用实现上-中-下布局。
demo link
<body> <aside>ASIDE</aside> <div class="content"> <header>HEADER</header> <article>CONTENT</article> <footer>FOOTER</footer> </div> </body> body { min-height: 100vh; display: flex; } aside { flex: none; } .content { flex: auto; display: flex; flex-direction: column; } .content article { flex: auto; }
Sticky Header
还是种常上-中-下布局，区别是用布 header 固定在顶部，WordPress模板不会随着页面滚动。使用实现
demo link
<body> <header>HEADER</header> <article>CONTENT</article> <footer>FOOTER</footer> </body> body { min-height: 100vh; display: flex; flex-direction: column; padding-top: 60px; } header { height: 60px; position: fixed; top: 0; left: 0; right: 0; padding: 0; } article { flex: auto; height: 1000px; }
Sticky Sidebar
左侧 sidebar 固定在左侧且与视窗同高，种常当内容超出视窗高度时，用布在 sidebar 内部出现滚动条。使用实现左右两侧滚动条互相独立。种常
用布
demo link
用布
用布<body> <aside> ASIDE <p>item</p> <p>item</p> <!-- many items --> <p>item</p> </aside> <div class="content"> <header>HEADER</header> <article>CONTENT</article> <footer>FOOTER</footer> </div> </body> body { height: 100vh; display: flex; } aside { flex: none; width: 200px; overflow-y: auto; display: block; } .content { flex: auto; display: flex; flex-direction: column; overflow-y: auto; } .content article { flex: auto; }
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。