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

Question

我整天都在尝试用 CSS 创建这种网站模板，但没有成功。

任何帮助将不胜感激。谢谢

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

++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++
+ M + HEADER +
+ E +++++++++++++++++++++++++++++++++++++++++ +++++++++++
+ N +
+ + 内容 +
+ U ++++++++++++++++++++++++++++++++ ++++++++++++++++++++++
+ + FOOTER +,
+++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++

布局

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

尝试使用引导程序。http://examples.getbootstrap.com/

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