在浮动页面上添加固定横幅

Question

我是html和css的新手，正在尝试设计一个网站，每个页面上都有固定的横幅和侧面菜单，然后在类似中心框架的环境中放置内容。 目前，我的所有内容都呈流动形式，如下所示：

<body>

<div id="banner">
<?php
include('banner.html');
?>
</div>

<div id="sidemenu">
<?php
include('sidemenu.html')
?>
</div>

<div id="content">
<?php
include ('content.html')    
?>
</div>

</body>    

作为我的样式CSS代码的一部分，我有：

#banner
{
background-color:#6a2b93;
color:#FFDB00;
text-align:right; 
font-family:"Times New Roman", Times, serif;
width:100%;
height:10%;
position:fixed;
}


#sidemenu
{
background-color:#6B2B93;
color:#FFDB00;
text-align:left;
font-family:"Times New Roman", Times, serif;
padding-left:2%;
padding-right:1%;
padding-bottom:5px;
height:90%;
width:20%;
position:fixed;
top:10%;
float:left; 
overflow: auto;
}

#content
{
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family:="Times New Roman", Times, serif;
margin-right:20px;
margin-left:23%;
padding-right:2.5%;
padding-left:2.5%;
padding-bottom:5px;
height:90%;
width:72%;
position:fixed;
top:10%;
float:left;
overflow:auto;
}

理想情况下，我想将横幅的高度设置为3em，但是我似乎找不到解决办法，同时在侧面菜单和内容上保留了自动溢出选项。 这可能吗？

Answer 1

我不确定为什么要在所有元素上使用position:fixed ，这对于其他元素（除了页眉或页脚）很少是一个好的解决方案，因为在调整大小时它们不会随窗口一起移动，而是保持固定（显然）在窗口中的位置。 但是，如果您希望#banner高3em，则#sidemenu和#content也必须具有top:3em ，以便不与横幅重叠。 查看更新的小提琴

更新：这可能是您想要的结构（插入您自己的测量值）的方法，使用固定的标头并在该标头下方的左/右全高-Fiddle 。

更新2：好的，让我们再试一次，这是您想要的吗？ 固定的标题和侧边栏以及内容部分，当溢出时滚动。 您将不得不更改为自己的测量- 小提琴

Answer 2

#banner
{
background-color:#6a2b93;
color:#FFDB00;
text-align:right; 
font-family:"Times New Roman", Times, serif;
width:100%;
min-height:100px;
height:100px;
}


#sidemenu
{
background-color:#6B2B93;
color:#FFDB00;
text-align:left;
font-family:"Times New Roman", Times, serif;
padding-left:2%;
padding-right:1%;
padding-bottom:5px;
min-height:100px;
height:90%;
width:200px;
position:fixed;
top:100px;
float:left; 
overflow: auto;
}

#content
{
background-color:#FFFFFF;
color:#000000;
text-align:justify;
font-family:="Times New Roman", Times, serif;
margin-right:20px;
margin-left:23%;
padding-right:2.5%;
padding-left:2.5%;
padding-bottom:5px;
height:90%;
width:72%;
top:10%;
float:left;
overflow:auto;​}​