html - 自动调整一个 div 和所有父 div 的大小

Question

布局具有以下安排:(使用 MVC3 - 整个 html 在 Layout.cshtml 中)

• 顶部标题(包含横幅和菜单栏)
• 内容(分为左 Pane 和右 Pane )。
• 页脚

右 Pane 的内容包含选项卡，高度可能因打开的选项卡而异。

我想让内容 div 自动调整到高度而不创建滚动条(不是浏览器滚动条)。

这在一定程度上实现了，但它破坏了 CSS 的其余部分。

这是 CSS:

html {
    width: 100%;
    height: 100%;    
}

body {
width: 100%;
/* height: 100%;    */
}

#Wrapper {
    border: 1px solid #6A89C1;
    height: 100%;
    margin: 0px auto;
    min-height: 750px;
    min-width: 700px;
    width: 100%;
    font-size: 0.75em;
}

header {
    background-color: #abcdef;
    height: 19%;  /* did not keep it 20% due to some Background repeat issues.. */
    margin: 0px;
    border-bottom: 2px outset #FFFFFF;
    width: 100%;    
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#Banner {   
    height: 72%;
    width: 100%;
    padding-top: 5px;
}

#Menu {
    height: 25%;
    width: 100%;    
}

#Contents {
    height: auto; /*65%;*/
    width: 100%;
    clear: both;    
}

#Contents #LeftPane {
    background-color: #E9F1FF;
    border-right: 1px solid #B9D4FF;
    height: 100%;
    min-height: 300px;
    width: 24.8%;  /* Should not be exactly 25% as it causes RightPane div to shift downwards  */    
}

#Contents #RightPane {
    background-color: #FFFFFF;
    height: 100%;
    width: 75%;    
    overflow: auto;
}

.Left {
    float: left;    
}

.Clear {
    clear: both;    
}

footer {
    background-color: #6A89C1;
    clear: both;
    height: 15%;
    width: 100%;
    margin: 0px;
    min-height: 50px;
}

#Wrapper, footer {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;    
}

整个中心部分需要自动增长但是布局(propotions)应该是一样的

附件也是根据给定的 CSS 调整后的图像

(注意菜单栏 Bg 和左 Pane 和页脚高度)

希望已经充分解释了这个问题:)

Answer 1

我会避免一起使用高度，浏览器会根据它们的内容调整元素高度。