我在使用CSS时出现样式问题。 我有一个由4个主要区域和1个整体区域组成的网站。 我简化了代码并为每个区域添加了颜色代码以便更快地了解，但css的主要区域如下所示：
.madegamesDiv {
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width: 100%;
min-width: 1200px;
height: 34px;
background-color: #778013;
border-bottom: 1px solid #39950E;
}
.allDiv {
position: fixed;
top: 35px;
left: 0px;
width: 100%;
height: 100%;
min-width: 1200px;
min-height: 850px;
background-color: #39950E;
overflow: scroll;
}
.leftDiv {
position: absolute;
z-index: 1;
height: 775px;
float: left;
width: 200px;
overflow: hidden;
position: fixed;
padding: 5px;
background-color: #FFFF00;
}
.topDiv {
min-width: 1000px;
position: fixed;
left: 200px;
top: 35px;
height: 150px;
overflow: hidden;
background-color: #FF00FF;
}
.mainDiv {
width: 100%;
min-width: 800px;
max-width: calc(100% - 500px);
background-color: #FFFFFF;
position: fixed;
left: 50%;
margin-left: calc((100% - 500px)/2*(-1));
top: 160px;
height: calc(100% - 180px - 27px);
overflow: auto;
border: 1px solid #225909;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
padding: 10px;
background-color: #FF0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<div id="madegamesDiv" class="madegamesDiv"></div>
<div id="all" class="allDiv">
<div id="left" class="leftDiv">
<p>Menu Area</p>
</div>
<div style="position:absolute;left:200px;height:100%;top:0px;">
<div id="top" class="topDiv">
<p>Top Area with logo and other stuff</p>
</div>
<div id="main" class="mainDiv">
<h1>Main Area</h1>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
</div>
</div>
</div>
</body>
主要区域main是内容最多的区域。它需要可滚动。
但我现在的问题是，当浏览器窗口太小时，我怎么能意识到所有区域都正确显示？
我想用CSS可以滚动整个区域all
overflow:auto;或overflow:scroll;。但这不起作用。我认为问题在于，其他区域为position:fixed，因此整个区域all无法识别其他区域的大小。很难解释，我希望，你能理解，我试图解释。
当窗口太小时，有没有办法显示滚动条？
在此先感谢您的帮助。如果某些代码丢失或某些内容不清楚，请随时询问。
答案 0 :(得分：1)
我认为你真正需要的是响应式设计 - 一个让你的网页可以在任何尺寸的屏幕上工作的奇特术语，从最大的桌面显示器到iPhone 5.这基本上需要更多的CSS - 并不困难，但是问题太复杂了，无法在这里回答。网上有一些很好的教程，但从维基百科开始：http://en.m.wikipedia.org/wiki/Responsive_web_design
答案 1 :(得分：0)
试试我的试用
<html>
<head>
<style>
body
{
padding:0;
margin:0;
}
.madegamesDiv
{
display:block;
max-height:34px;
background-color:#778013;
border-bottom:1px solid #39950E;
}
.allDiv
{
display:block;
clear:both;
margin:0;
padding:0;
height:97%;
background-color:#39950E;
overflow:scroll;
}
.leftDiv
{
float:left;
width:19%;
height:99%;
overflow:hidden;
padding:0;
background-color:#FFFF00;
}
.leftDiv p
{
padding:5px;
margin:0;
font-size:12pt;
}
.rightDiv
{
display:block;
float:left;
width:78%;
margin-left:0.5%;
height:99.5%;
overflow:hidden;
padding:0;
background-color:transparent;
}
.topDiv
{
display:block;
clear:both;
height:20%;
max-height:20%;
overflow:hidden;
background-color:#FF00FF;
}
.mainDiv
{
display:block;
clear:both;
width:90%;
margin:0 auto;
margin-top:-3%;
background-color:#FFFFFF;
max-height:95%;
overflow:auto;
border: 1px solid #225909;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
padding:10px;
background-color:#FF0000;
}
</style>
</head>
<body>
<div id="madegamesDiv" class="madegamesDiv">A</div>
<div id="all" class="allDiv">
<div id="left" class="leftDiv">
<p>Menu Area</p>
</div>
<div class="rightDiv">
<div id="top" class="topDiv">
<p>Top Area with logo and other stuff</p>
</div>
<div id="main" class="mainDiv">
<h1>Main Area</h1>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
<p>Here is a lot of text and content</p>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>