如何使用CSS制作此页眉/内容/页脚/菜单布局？

Question

我一直在努力在CSS中创建这种网站模板而没有成功。

非常感谢任何帮助。 THX

• 即使我们滚动
，标题也应始终可见
• 菜单的高度是Header + Content + footer
的大小
• 可以滚动内容，大小可以高于浏览器窗口
• 应在内容
之后显示页脚

+++++++++++++++++++++++++++++++++++++++++++++++ +++++++
+ M +报头+报
+ E ++++++++++++++++++++++++++++++++++++++++++++++++ ++
+ N +
+ + +含量
+ U ++++++++++++++++++++++++++++++++++++++++++++++++ ++
+ + + FOOTER，
+++++++++++++++++++++++++++++++++++ +++++++++++++++++++

Layout

Answer 1

<div class="page">
    <div class="left-bar">
        <div class="menu">
            MENU
        </div>
    </div>
    <div class="right-bar">
        <div class="header">HEADER</div>
        <div class="content">CONTENT</div>
        <div class="footer">FOOTER</div>
    </div>
</div>
<style>
    * {text-align:center;}
    html, body {margin:0; padding:0;}
    .page {position:relative;}
    .left-bar {position:absolute; left:0px; width:200px; height:100%; border-right:2px solid red;}
    .right-bar {margin-left:200px; padding-top:150px;}
    .header {position:fixed; left:200px; top:0px; right:0px; height:150px; border:2px solid blue; background:#eeeeee;}
    .content {height:1000px;} /*replace with height:auto; for real content*/
    .footer {height:40px; border-top:2px solid green; background:#eeeeee;}
</style>

Answer 2

尝试使用Bootstrap。 http://examples.getbootstrap.com/

您可以轻松创建一个粘滞的左侧菜单，该菜单也可以响应所有尺寸的设备。