Div在JSP页面中未正确对齐

Question

I need a page to be aligned in the following way, 我需要以以下方式对齐页面，

对齐页面

My Left Navigation contains all the links. 我的左侧导航包含所有链接。 On the right div there is a top div which will have a constant height. 在右边的div上有一个顶部div，它的高度恒定。 Contents page will display the contents when clicked on a left navigation link. 单击左侧导航链接时，“内容”页面将显示内容。 This content page should occupy the remaining height. 该内容页面应占据剩余的高度。

Following code is what I have tried. 以下代码是我尝试过的。

css: CSS：

body, html {
    height: 100%;
    widht: 100%;
    padding: 0;
    margin: 0;
}

.leftMenu {
    float: left;
    width: 20%;
    height: 100%;
    background: gray;
    position: absolute;
}

.rightMenu {
    width: 80%;
    height: 100%;
}

.row1 {
    height: 10%;
    background: red;
}

.row2 {
    height: 90%;
    background: green;
}

JSP page: JSP页面：

<body>

    <div id="mainDiv">
        <div id="leftDiv" class="leftMenu">
            <ul>
                <li id="page1"> Page - 1 </li>
                <li id="page2"> Page - 2 </li>
                <li id="page3"> Page - 3 </li>
            </ul>
        </div>

        <div id="contentDiv" class="rightMenu">

            <div id="topDiv" class="row1">
                <label>Servlet and Jsp Examples</label> <br>
            </div>

            <div id="ContentDiv" class="row2">
                <label>Content 1</label> <br>
                <label>Content 2</label> <br>
                <label>Content 3</label> <br>
                <label>Content 4</label> <br>
            </div>
        </div>

    </div>

</body>

Problem is that my right div coming below the left div and the contents div is not occupying the remaining space at bottom. 问题是我的右div低于左div，而内容div没有占据底部的剩余空间。

Please look at jsFiddle also. 也请看jsFiddle 。

Answer 1

Is this what you're looking for? 这是您要找的东西吗？

CSS: CSS：

#mainDiv { height: 100%; }

.leftMenu {
    width: 20%;
    height: 100%;
    background: gray;
    position: fixed;  /* <-- fix the left panel to prevent from scrolling */
}

.rightMenu {
    height: 100%;
    margin-left: 20%; /* <-- pull out the right panel from under the left one */
}

.row1 {
    min-height: 10%; /* <-- fix the height issue when content grows */
    background: red;
}

.row2 {
    min-height: 90%; /* <-- fix the background-color issue when content grows */
    background: green;
}

JSFiddle Demo JSFiddle演示

Div在JSP页面中未正确对齐

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-25 09:58:59

Div在JSP页面中未正确对齐

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-25 09:58:59

解决方案1
1 已采纳 2013-08-25 09:58:59