Html Div在JSP页面中没有正确对齐_Html_Css_Jsp

Html Div在JSP页面中没有正确对齐

html css jsp

Html Div在JSP页面中没有正确对齐,html,css,jsp,Html,Css,Jsp,我需要一个页面按以下方式对齐我的左侧导航包含所有链接。在右侧div上有一个顶部div，其高度恒定。当单击左侧导航链接时，“内容”页面将显示内容。此内容页应占据剩余高度下面的代码是我尝试过的 css: JSP页面： <body> <div id="mainDiv"> <div id="leftDiv" class="leftMenu"> <ul> <li i

我需要一个页面按以下方式对齐

我的左侧导航包含所有链接。在右侧div上有一个顶部div，其高度恒定。当单击左侧导航链接时，“内容”页面将显示内容。此内容页应占据剩余高度

下面的代码是我尝试过的

css:

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>



第1页
第2页
第3页

Servlet和Jsp示例

内容1

内容2

内容3

内容4

问题是我的右div位于左div的下方，而contents div并没有占用底部的剩余空间

请同时查看。

这就是您要找的吗

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;
}

#mainDiv{高度：100%；}
.左菜单{
宽度：20%；
身高：100%；
背景：灰色；
位置：固定；/*这就是你要找的吗
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;
}

#mainDiv{高度：100%；}
.左菜单{
宽度：20%；
身高：100%；
背景：灰色；
位置：修正；/*正确..+1..但是你能告诉我我犯了什么错误吗？@Che我在里面添加了相关评论来解释：）正确..+1..但是你能告诉我我犯了什么错误吗？@Che我在里面添加了相关评论来解释：）