Solved! Finished CSS and HTML at bottom.
好的，情况是这样的。我有一个页面，其侧面、顶部和底部都有一个 div。侧面的 div 位于左侧 225px。顶部的div是25px，底部的div是20px。我想要的是它们中间的一个 div，因此它会根据访问者浏览器的大小调整大小(并且是可滚动的)。 我有什么工作，但不会滚动，而且宽度不正确，所以我必须将所有内容居中。它只是使用了浏览器的宽度，但略微超出了一些边距，因此它实际上悬在侧边栏下方。
A quick sketch of how it's setup.
有什么想法吗？
key : 菜单是最上面的。 bottom_menu 是底部菜单。 内容是我需要帮助的部分，在中心。 侧边栏是侧面的内容。
CSS:
@charset "UTF-8";
/* CSS Document */
html {
height:100%;
}
img
{
border-style: none;
color: #FFF;
text-align: center;
}
body {
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:#000;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
width:225px;
min-height:100%;
position:fixed;
top:25px;
left:0px;
overflow:hidden;
padding-left:5px;
padding-top:5px;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:25px;
position:fixed;
top:0px;
left:0px;
overflow:hidden;
padding-left:5px;
}
.content {
width:100%;
top:25px;
height:100%;
overflow:hidden;
position:fixed;
padding-left:5px;
padding-top:5px;
background-color:#FFF;
margin-left:112px;
font: 14px Helvetica, Arial, Sans-Serif;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:20px;
position:fixed;
bottom:0px;
left:0px;
overflow:hidden;
padding-left:5px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
}
HTML(DIV 放置):
<body>
<div class="sidebar">CONTENT IN SIDEBAR</div>
<div class="menu">CONTENT IN TOP MENU</div>
<div class="bottom_menu">CONTENT IN BOTTOM MENU</div>
<div class="content">CONTENT IN CONTENT</div>
</body>
完成的 CSS
@charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
height:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
min-height:100%;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
min-height:100%;
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
完成的 HTML:
<body>
<div class="menu">HEADER CONTENT</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1">
CONTENT
</div>
</div>
<div class="col2">
LEFT SIDEBAR CONTENT
</div>
</div>
</div>
<div class="bottom_menu">FOOTER CONTENT</div>
<div class="clear"></div>
</body>
最佳答案
关于css - 如何根据浏览器大小创建 DIV？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/958472/