html - CSS 样式问题 - 滚动

Question

我正在尝试构建一个菜单(请参阅 fiddle )。我有文本框，在某些情况下会隐藏，在某些情况下会显示，所以当 textbox 隐藏时，下面的 div 应该调整位置。 listitems div 包含很多列表项。底部 div 应该位于屏幕底部。 maindiv 的位置应该是固定的。末尾的菜单区域 div 无法删除。样式定义的东西搞砸了，我无法向下滚动到最后一项。有没有办法在不为 listitems div 分配特定高度的情况下做到这一点？

我想得到这样的东西。 http://tinypic.com/r/1t0sat/6

任何提示或指示都会有所帮助。谢谢!

Answer 1

我已尝试根据您的要求更新您的 CSS。核实。我希望你能找到你的解决方案。

 #mainDiv {
    bottom: 0px;
    border-top-width: 1px;
    border-right-width: 1px;   
    border-bottom-width: 1px;
    border-left-width: 1px;
    position: relative;
    min-height:100%;
    height:auto !important;
    z-index: 30;
    box-shadow: 5px 5px 5px #888;
    background-color: rgb(0, 87, 71);
}
#mainDiv .MainContentArea {
    width: 100%;
    height: 100%;   
     height:auto !important;
    min-width: 240px;
     min-height:100%;
}
#mainDiv .HeadingArea {
    left: 0px;
    top: 0px;
    height: 16px;
    right: 0px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    white-space: nowrap;  
    background-color: rgb(96, 76, 91);
}
#mainDiv .InputArea {
    left: 0px;
    top: 0px;
    height: 30px;
    right: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    white-space: nowrap;

}
#mainDiv .SubTitleArea {
    left: 0px;
    top: 0px;
    height: 16px;
    right: 0px;
    padding-top: 12px;
    padding-right: 8px;
    padding-bottom: 12px;
    padding-left: 8px;
    white-space: nowrap;

}
#mainDivSearch input[type='text'] {
    width: 220px;
    height: 30px;
    padding-top: 0px;
    padding-right: 22px;
    padding-bottom: 0px;
    padding-left: 3px;
}
#mainDiv input[type='checkbox'] {
    vertical-align: bottom;
}
#mainDiv .ContentArea {
    left: 0px;
    top: 0px;
    height: 100%;

}
#mainDiv .MenuArea {
   width:100%;
    height: 28px;
    text-align: center;

    bottom: 0px;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    white-space: nowrap;
    position: absolute;
    background-color: rgb(216, 176, 131);

}
#ContentListArea {
    width: 100%;
    height: 100%;

}
#ContentListArea .Options2Area {
    left: 0px;
    top: 0px;
    height: 16px;
    right: 0px;
    padding-bottom: 6px;
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 18px;
    vertical-align: top;
    border-bottom-color: #afafaf;
    border-bottom-width: 1px;
    border-bottom-style: solid;

}
#ContentListArea .ListItemsArea {
    left: 0px;
    top: 32px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 18px;

}
.ItemList li {
    padding-bottom: 4px;
    display: block;
    list-style-type: none;
}
.ItemList li .ItemArea {

    height: 15px;
}
.ItemList li .ItemDetail {
    left: 0px;
    top: 0px;
    white-space: nowrap;

}
.ItemList li .ItemLabel {
    padding-top: 8px;
    white-space: nowrap;
}
textarea, select, input[type=text] {
    width: 99%;
    overflow: auto;

}

body, html
{
    height: 100%;
    min-height: 100%;
}