0

布局具有以下排列：（使用 MVC3 - 整个 html 在 中Layout.cshtml）

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

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

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

布局截图

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

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

调整后的布局

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

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

4

4 回答 4

0

您应该使用 javascript（或 jquery）获取打开的选项卡高度，并将此高度分配给内容容器。

于 2013-01-03T09:32:48.703 回答
0

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

overflow: auto

导致滚动条。

您可以使用 javascript 来执行此操作（更改选项卡时，根据选项卡的高度更改高度）。我不确定是否还有其他方法。

于 2013-01-03T09:45:55.957 回答
0

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

于 2013-01-03T10:19:20.077 回答
0

感谢所有的帮助..！

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

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

 same for Contents and footer div..

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

于 2013-01-03T10:46:14.637 回答