股利不正確的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頁面

回答

相關問題