网页主要区域：div高度问题

Question

这就是我想要实现的目标：

我通过给menu-main-window一个固定的高度（以像素为单位）得到了这个，这是我不想要的。我希望这种效果反应灵敏。

这是我拥有的（Fiddle）：

＆＃13;

＆＃13;

body {
    font: 13px/20px'Helvetica', Tahoma, Verdana, sans-serif;
    color: #404040;
    background-color: #DAECF4;
}
footer {
    left: 0;
    bottom: 0px;
    padding-bottom: 10px;
    background-color: Black;
    font-size: 1em;
    width: 100%;
    height: 30px;
    position: fixed;
    color: White;
    border-top: 2px solid white;
}
header .content-wrapper {
    padding-top: 20px;
}
.breadcrumbs {
    background-color: white;
    border: 1px solid silver;
    border-radius: 10px;
    margin-top: 6px;
    padding-left: 20px;
    box-sizing: border-box;
}

.content-wrapper {
    margin: auto;
    max-width: 98%;
    border-radius: 5px;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.menu-main-window {
    border: 1px solid silver;
    border-radius: 20px;
    background-color: White;
    margin: 2% auto 6%;
    box-sizing: border-box;
    height: 100%; /* This does nothing */
}
.user-info {
    float: right;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    vertical-align: bottom;
}
#body {
    width: 95.9%;
    margin: auto;
}
#top-section {
    border: 1px solid silver;
    border-radius: 20px;
    width: 95.75%;
    height: 100px;
    margin: auto;
    background-color: White;
    box-sizing: border-box;
}

＆＃13;

<header id="top-section">
    <div class="content-wrapper">
        <div class="float-left"> <a href="../Main/Index"><img class="logo" src="" alt="Logo" title="AppName"/></a>

        </div>
        <div class="user-info">Welcome chiapa</div>
    </div>
</header>
<div id="body">
    <div class="breadcrumbs">Menu</div>
    <div class="menu-main-window"></div>
</div>
<footer>
    <div class="content-wrapper">
        <div class="float-right">
            <p>&copy; AppName v.1.0 - 2014</p>
        </div>
    </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

我怎样才能实现它？

Answer 1

您正在使用height: 100%它始终从父级继承。你没有为你的html和body标签设置任何高度。添加html {height: 100%;} body {height: 100%}和#body {height: 100%}即可。

正在使用 DEMO

Answer 2

尝试：

body, html {
        font: 13px/20px'Helvetica', Tahoma, Verdana, sans-serif;
        color: #404040;
        background-color: #DAECF4;
        height:100%;
    }
    #body
    {
         height:100%;
    }

DEMO