如何根據瀏覽器大小創建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