Solved! Finished CSS and HTML at bottom.

好的，情况是这样的。我有一个页面，其侧面、顶部和底部都有一个 div。侧面的 div 位于左侧 225px。顶部的div是25px，底部的div是20px。我想要的是它们中间的一个 div，因此它会根据访问者浏览器的大小调整大小(并且是可滚动的)。我有什么工作，但不会滚动，而且宽度不正确，所以我必须将所有内容居中。它只是使用了浏览器的宽度，但略微超出了一些边距，因此它实际上悬在侧边栏下方。

A quick sketch of how it's setup.

Có ý tưởng gì không?

key :菜单是最上面的。bottom_menu 是底部菜单。内容是我需要帮助的部分，在中心。侧边栏是侧面的内容。

CSS:

@charset "UTF-8";
/* CSS Document */

html {
    chiều cao: 100%;
}

hình ảnh
{
    border-style: none;
    color: #FFF;
    căn chỉnh văn bản: ở giữa;
}

thân hình {
    chiều cao: 100%;
    chiều rộng: 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;
    chiều rộng: 100%;
    height:25px;
    position:fixed;
    top:0px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
}

.content {
    chiều rộng: 100%;
    top:25px;
    chiều cao: 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;
    chiều rộng: 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 放置):

CONTENT IN SIDEBAR

CONTENT IN TOP MENU

CONTENT IN BOTTOM MENU

CONTENT IN CONTENT

完成的 CSS

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    căn chỉnh văn bản: ở giữa;
}
thân hình {
    background-color:#000;
    margin:0;
    padding:0;
    border:0; /* This removes the border around the viewport in old versions of IE */
    chiều rộng: 100%;
    chiều cao: 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;
    chiều rộng: 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;
    chiều rộng: 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;
    tràn: ẩn;
}

完成的 HTML:

HEADER CONTENT


    

      

            

                 CONTENT
            

        

        

            LEFT SIDEBAR CONTENT
        

    


FOOTER CONTENT

câu trả lời hay nhất

你的意思是这样的:The 'Left Menu' 2 column Liquid Layout (Pixel-widths) ?

关于css - 如何根据浏览器大小创建 DIV？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/958472/