如何根据浏览器大小创建DIV？

解决！完成CSS和HTML在底部。如何根据浏览器大小创建DIV？

好了，所以这里的情况。我有一个侧面，顶部和底部div的页面。侧边的div在225px左侧。顶部的div是25px，底部的div是20px。我想要的是它们中间的一个div，所以它根据访问者浏览器大小调整（并且可滚动）。我有作品，但不会滚动，也不是正确的宽度，所以我必须将所有内容放在中间。它只是使用浏览器的宽度，但稍微有一点余量，所以它实际上悬挂在边栏下方。

A quick sketch of how it's setup.

任何想法？

关键： 菜单是顶部。 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>

来源

2009-06-05 Devin