0

我是 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，但我似乎找不到这样做的方法，同时在侧边菜单和内容上保留自动溢出选项。这可能吗？

4

2 回答 2

0

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

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

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

于 2012-09-22T20:38:13.807 回答
0 
#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;​}​
于 2012-09-22T23:41:47.637 回答