左側菜單有高度和最小高度100％

感謝您的耐心等待。我需要製作一個具有高度和最小高度的左側菜單100％例如。左側菜單有高度和最小高度100％

如果網站doesn't有很多的內容，左邊的菜單應該去底部如果網站有很多內容，在左邊的菜單應該去底部還可以，但在滾動條...

左，右div的始終必須是100％

Image Example http://www.diegomenezes.com/stack.jpg

它可以使用HTML5

這裏您可以同時看到的jsfiddle鏈接 http://jsfiddle.net/6gSYn/

在這裏我的代碼！

<div id="container"> 
    <div id="top"><h1>TESTE</h1></div> 
    <div id="content"> 
     <div id="left"> 
     <ul class="lista"> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li>     
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
      <li>ITEM 1</li> 
     </ul> 
     </div> 
     <div id="right"> 
     <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>   

      <div id="footer"> 
      <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p> 
      </div> 
    </div> 
    </div>  

</div>

這裏的CSS

@charset "utf-8"; 
/* CSS Document */ 

* { 
margin: 0px; 
padding: 0px; 
} 
html { 
    height: 100%; 
} 

body { 
background: darkgrey; 
height: 100%; 

} 

#container {  
height: 100%; 
position: relative; 
} 

#top { 
height: 100px; 
width: 100%; 
background-color: black; 
color: white; 
float:left; 
} 

#content { 
background: darkgrey; 
width:100%; 
min-height: 100%; 
height:100%; 
} 

#content ul.lista { 
width: 250px; 
display: inline-block; 
vertical-align: top; 
background: lightgrey; 
color: red; 
bottom: 0; 
} 


#right { 
width: 1000px; 
color: blue; 
display: inline-block; 
padding: 10px; 
min-height: 400px; 
} 


#footer { 
color: black; 
height: 50px; 
text-align: center; 
width: 100%; 
}

來源

2013-04-22 Diego Menezes

爲什麼min-height 100％？爲什麼不是身高100％？ – 2013-04-22 13:53:16

它可能是！但是，如果它只有一些內容，它應該到底...但我嘗試了一切，沒有任何工作！ – 2013-04-22 13:55:58

所以你想要在底部的菜單？在任何時候？爲什麼在底部？而不是頂部？ – DiederikEEn 2013-04-22 13:56:50

試試這個，你告訴工作或不jsfiddle
CSS：

#right { 
    overflow-y: scroll; 
} 

td { 
    vertical-align:top; 
}

來源

2013-04-22 14:21:58 navand

謝謝@navand是我嘗試過的一種方法......但它不是最好的方法......如果我找不到解決方案，請嘗試這一個！ – 2013-04-22 14:26:26

你不想使用'

'？ – navand2013-04-22 14:34:14

@ navand現在誰做的？http://stackoverflow.com/q/83073/156755 – Basic 2013-04-22 18:35:44

我不認爲有是一個純css解決這個問題。可能有一些不容易理解和執行的剔號。相反，您可以使用小javascript或精確jQuery來解決您的問題。

讓我們假設代碼塊如下 -

<div id="mainContainer"> 
    <div id="leftContainer"> 
     <p>Some contents which you want to put in the left blovk</p> 
    </div> 
    <div id="rightContainer"> 
     <p>Some contents which you want to put in the right blovk</p> 
    </div> 
</div>

現在使這兩個DIV具有相同的寬度leftContainer和rightContainer你需要添加一些js -

$(document).ready(function(){ 
// making the height of the right container same as the left one 

    leftContainerHeight = $('#leftContainer').outerHeight(); 
    $('#rightContainer').height(leftContainerHeight); 

//or 

// making the height of the right container same as the left one 

    rightContainerHeight = $('#leftContainer').outerHeight(); 
    $('#leftContainer').height(rightContainerHeight); 

});

這js將設置您感興趣的容器的高度動態。但是，如果你的dom真的很沉重，或者訪問者的連接速度很慢，那麼一個退步是，那麼就會出現跳高。這意味着只要頁面完成加載，您就會看到相關容器的高度會急劇增加。爲了避免出現這種情況，您可以使用加載gif圖像或者簡單地使用內容的fadeIn效果。您可以瞭解更多關於淡入效果here

這裏是小提琴。

http://jsfiddle.net/6gSYn/9/

如果你在這裏需要更多的幫助，請不吝指教。

謝謝。

來源

2013-04-22 18:25:02 maksbd19

爲了使高度：100％在所有瀏覽器中正常運行，您的父元素需要將高度指定爲像素高度。這很複雜，因爲有時您的內容需要比指定高度更多的空間。你可以使用javascript來解決這個問題，但這並不總是最好的解決方案。

來源

2013-04-22 19:40:49

相關問題