0

メニューを作成しようとしています（フィドルを参照）。場合によっては非表示になるテキストボックスがあり、場合によっては表示されるので、その下のdivtextboxは、非表示のときの位置を調整する必要があります。listitemsdivには多くのリストアイテムが含まれています。一番下のdivは画面の一番下にあるはずです。maindivの位置を修正する必要があります。最後のメニューエリアdivは削除できません。スタイル定義の何かがめちゃくちゃになっていて、最後の項目までスクロールできません。listitems divに特定の高さを割り当てずにそれを行う方法はありますか？

私はこのようなものを手に入れようとしています。http://tinypic.com/r/1t0sat/6

ヒントやポインタが役立ちます。ありがとう！

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

独自のコードフラグメントを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 に答える
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 に答える