我需要一个页面以下列方式对齐,
我的左侧导航包含所有链接。在右边的 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。