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

Solved! Finished CSS and HTML at bottom.

解决了!完成CSS和HTML在底部。

Ok, so here is the situation. I have a page with a div on the side, on top, and on bottom. The div on the side is on the left at 225px. The div on top is 25px, and the div on bottom is 20px. What I want is a div in the middle of them all, and so it resizes (and is scrollable) based on the visitors browser size. What I have works, but will not scroll, and is not the right width so I have to center all my content in it. Its just using the width of the browser, but pushed over a bit with a margin, so its actually hanging over underneath the sidebar.

这里是情况。我有一个页面，在顶部和底部都有一个div。左边的div在225px的左边。上面的div是25px，下面的div是20px。我想要的是其中的一个div，因此它可以根据访问者的浏览器大小调整大小(并且是可滚动的)。我拥有的作品，但不会滚动，而且宽度也不合适，所以我必须把所有的内容都集中在其中。它只是使用浏览器的宽度，但是用了一点边距，所以它实际上是挂在侧边栏下面。

A quick sketch of how it's setup.

它是如何建立的一个快速的草图。

Any ideas?

什么好主意吗?

Key: menu is the top. bottom_menu is the bottom menu. content is the part I need help with, in the center. sidebar is what goes on the side.

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

CSS:

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 Placement):

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>

Finished CSS

完成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;
}

Finished HTML:

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>

3 个解决方案

#1

You mean something like this: The 'Left Menu' 2 column Liquid Layout (Pixel-widths)?

你的意思是这样的:“左菜单”两栏液体布局(像素宽度)?

#2

CSS doesn't handle this well - though it can be done with relative ease.

CSS并不能很好地处理这个问题——尽管它可以相对轻松地完成。

The problem is that divs are only self aware - they can't do "look at my adjacent sibling and make me the same height"

问题是divs只有自我意识，他们不能“看着我的相邻的兄弟姐妹，让我和他们一样高”

There are ways using large paddings and negative margins, though they fail at a number of things

有很多方法可以使用大的衬垫和负的边距，尽管它们在很多方面都失败了

Can't use in page anchor links. e.g. page.html#section-b
不能在页面锚点链接中使用。例如page.html #部分b
Can fail to print properly in older browsers.
在旧的浏览器中可能无法正确打印。
Can not have elements appearing outside - as it set's display: hidden on the wrapper container.
不能让元素出现在外部——因为它设置了显示:隐藏在包装容器上。

Having said that, it is possible, and I've done it recently a few times. The site that Frank suggests in his answer is where I went to learn it and use it properly. I'd recommend examining the source and CSS of that page. Firebug can help greatly here.

话虽如此，这是可能的，我最近也做过几次。弗兰克在他的回答中建议的网站是我去学习它并正确使用它的地方。我建议检查该页面的源代码和CSS。Firebug在这里有很大的帮助。

When the CSS property display: table and it's friends become widespread supported (IE8 just incorporated this), it'll be much easier to do this sort of thing.

当CSS属性display: table和它的好友得到广泛支持(IE8刚刚合并了这个)时，做这样的事情会容易得多。

#3

There is another way of doing this using considerably less markup (wrapping elements and other superfluous, ambiguous tags):

有另一种方法可以使用较少的标记(包装元素和其他多余的、不明确的标记):

http://jsfiddle.net/zBLbt/23/

It would likely need to be be modified slightly to be completely cross-browser compatible, but the benefits of simpler markup outweigh the possible increase in testing.

它可能需要稍微修改一下才能完全跨浏览器兼容，但是更简单的标记带来的好处超过了可能增加的测试。

edit: modified code to be more readable.

编辑:修改后的代码更具可读性。

#1