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，以便不与横幅重叠。见updated Fiddle

更新：这可能是您想要的结构（插入您自己的测量值），使用固定的标题和左下角的全高 - Fiddle。< / p>

更新2：好的，让我们再试一次，这是你想要的吗？固定标题和侧边栏以及内容部分，在溢出时滚动。您必须更改为自己的测量值 - Fiddle

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;}

将固定横幅添加到浮动页面

2 个答案: