股利不正确的JSP页面

对准

我需要通过以下方式对齐一个页面，股利不正确的JSP页面

Aligned 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也。

来源

2013-08-25 Amarnath

这是你在找什么？

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

来源

2013-08-25 09:58:59

究竟.. +1 ..但是你可以只请让我知道我做了什么错？ – Amarnath

@Che我在里面添加了相关评论来解释:) –

股利不正确的JSP页面

回答

相关问题