Question

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

顶部标题（包含横幅和菜单栏）
内容（分为左右窗格）。
页脚

“右侧”窗格的内容包含选项卡，高度可能因打开的选项卡而异。

我想让内容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;    
}

Layout screenshot

整个中心部分需要自动增长，但布局（比例）应该相同

附加也是调整到给定CSS

后的图像

layout after adjustment

（注意菜单栏Bg和左侧窗格和页脚高度）

希望能够充分解释这个问题：）

Answer 1

您应该使用javascript（或jquery）获取打开的标签高度，并将此高度指定给内容容器。

Answer 2

http://www.w3schools.com/cssref/pr_pos_overflow.asp

overflow: auto

导致滚动条。

您可以使用javascript（当更改标签然后根据标签的高度更改高度时）。我不确定是否还有其他办法。

Answer 3

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

Answer 4

感谢所有帮助..！

找到了一种可能的解决方案，即不将所有内容放在包装器div中而是相互独立，即

 The Header div is separate div (parent is the body not the wrapper)

 same for Contents and footer div..

亲切的问候，再次感谢你的所有建议， A.Ali

自动调整div和所有父div的大小

4 个答案: