0

I'm trying to build a menu (see fiddle). I have text box which will be hidden in some cases, shown in some cases, so divs below that should adjust the position when textbox is hidden. The listitems div contains lot of list items. The bottom div should be at the bottom of the screen. maindiv's position should be fixed. Menu area div at the end cannot be removed. Something with the style definition is messed up, I cannot scroll down to the last item. Is there a way to do it without assigning specific height for listitems div?

I'm trying to get something like this. http://tinypic.com/r/1t0sat/6

Any hints or pointers will be helpful. Thanks!

4

4 回答 4

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%;
}
于 2013-01-29T11:08:26.887 回答
0

您需要为以下样式设置高度#ContentListArea .ListItemsArea

#ContentListArea .ListItemsArea {
left: 0px;
top: 32px;
right: 0px;
bottom: 0px;
overflow: auto;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 18px;
position: absolute;
height: 193px;/*change this according to your  need*/

}

小提琴演示 http://jsfiddle.net/krish/vhFX3/1/

于 2013-01-29T10:54:55.500 回答
0

在 CSS 中用我的替换你自己的代码片段

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

给它一个适当的高度，以便它可以在该高度内滚动。

于 2013-01-29T11:09:30.747 回答
0

将此行替换<div id="mainDiv" style="left: 198px; top: 101px; display: block;">为<div id="mainDiv" style="left: 198px; display: block;">并删除<div class="MenuArea"></div>

于 2013-01-29T10:50:03.250 回答