[英]Div are not properly aligning in JSP page
我需要以以下方式对齐页面,
我的左侧导航包含所有链接。 在右边的div上有一个顶部div,它的高度恒定。 单击左侧导航链接时,“内容”页面将显示内容。 该内容页面应占据剩余的高度。
以下代码是我尝试过的。
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页面:
<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>
问题是我的右div低于左div,而内容div没有占据底部的剩余空间。
也请看jsFiddle 。
这是您要找的东西吗?
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.