2016-09-25 71 views
-2

我知道可能有很多關於此事的問題,但他們都沒有真正幫助我解決問題,我一直試圖解決這個問題,一次又一次沒有結果。身高100%不適用於兒童元素

我想要做的很簡單,我有一個名爲container的div,裏面還有兩個div,menucontent

我希望menu div位於頁面的右側,並從container獲得全高(100%),但它不起作用。

我嘗試設置body高度爲100%,但它也不起作用,它只有當我設置使用PX(5000px例如)高度的作品,但我不希望它是一個固定高度。

CSS/HTML

html, body { 
 
\t height: auto; 
 
} 
 

 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow-y: scroll; 
 
} 
 

 
.container { 
 
\t float: right; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: grey; 
 
\t overflow: hidden; 
 
} 
 

 
.menu { 
 
\t float: right; 
 
\t width: 250px; 
 
\t height: 100%; 
 
\t background-color: green; 
 
} 
 

 
.content { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t font-family: Tahoma; 
 
\t font-size: 36px; 
 
\t font-weight: bold; 
 
}
<!DOCTYPE html> 
 

 
<html> 
 

 
\t <head> 
 

 
\t \t <link rel="stylesheet" href="style.css"> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Test</title> 
 

 
\t </head> 
 

 
\t <body> 
 

 
\t \t <div class="container"> 
 

 
\t \t \t <div class="menu"> 
 

 
\t \t \t \t <ul> 
 

 
\t \t \t \t \t <li>Home</li> 
 
\t \t \t \t \t <li>About</li> 
 
\t \t \t \t \t <li>Contact</li> 
 

 
\t \t \t \t </ul> 
 

 
\t \t \t </div> 
 

 
\t \t \t <div class="content"> 
 

 
\t \t \t \t <p align="center"> 
 

 
\t \t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui mi, blandit eu purus vestibulum, fermentum semper tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor massa id urna iaculis aliquam. Donec sed luctus neque. Vestibulum neque quam, porttitor sit amet vehicula et, vehicula id felis. Nulla vestibulum imperdiet sodales. Nunc dapibus nisl non felis porta, sit amet tincidunt est auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet eget arcu nec vehicula. Aenean neque enim, gravida ac elit vel, scelerisque dignissim mi. Donec iaculis commodo nisi in faucibus. 
 

 
\t \t \t \t \t Nam venenatis elementum sem sit amet accumsan. Fusce eget auctor nulla. Integer at mauris non velit pharetra gravida in a dui. Nam posuere odio sit amet tellus egestas dictum. Pellentesque sagittis diam vitae porta euismod. Nam pulvinar odio vel nibh lacinia faucibus. Mauris consectetur faucibus urna quis iaculis. Suspendisse quam purus, suscipit id feugiat condimentum, ullamcorper ac lectus. Sed ut egestas velit. Aenean sagittis ipsum non dui ultricies, ut ornare dolor tempor. Vivamus ac condimentum urna. Nunc eu odio vitae justo dictum varius at quis ante. Etiam a orci vitae est lobortis semper ac ac nisi. Suspendisse egestas, lorem vitae molestie fermentum, erat dui aliquam enim, id tristique mi erat non lacus. Sed nec lectus dolor. 
 

 
\t \t \t \t \t Vivamus vel ante ante. Ut commodo, dolor in laoreet interdum, leo nisi consequat nisl, sed feugiat velit risus varius enim. Sed auctor nibh eget orci laoreet pulvinar. Cras ornare convallis libero. Etiam felis mauris, volutpat eget lacus vel, aliquam iaculis dui. Nulla felis massa, scelerisque eu lectus non, porttitor consequat augue. Mauris mauris nibh, consequat quis odio quis, bibendum malesuada dui. Phasellus sapien libero, eleifend eu aliquam vel, ultrices non massa. Pellentesque cursus ex elit, at rutrum purus pharetra in. Sed faucibus feugiat eros non dictum. Donec ante ante, dignissim nec dignissim et, elementum at nulla. Aliquam interdum, est mollis tempor faucibus, dui sapien euismod sem, eleifend ultrices purus eros ac turpis. 
 

 
\t \t \t \t \t Etiam eget odio vitae quam pretium finibus. In feugiat quam non felis blandit posuere. Integer nec varius risus. Donec aliquet mi eu risus sollicitudin fermentum id vulputate enim. Integer quis congue augue. Suspendisse potenti. Nam lobortis turpis at nisl pretium, a ullamcorper dui euismod. Nam aliquam quam ac efficitur sodales. Curabitur cursus urna in arcu vehicula, sed vehicula purus mollis. 
 

 
\t \t \t \t \t In id lacus vel mi ornare rhoncus. In libero nisi, dictum eu aliquet ut, facilisis id diam. Vestibulum sollicitudin neque vitae diam faucibus, quis lobortis velit volutpat. Sed risus mauris, semper quis feugiat a, accumsan vitae velit. Vivamus viverra, lacus vel malesuada tristique, urna purus euismod augue, at laoreet lorem nunc in sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae feugiat felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a semper eros, id cursus ipsum. Maecenas eu libero hendrerit, euismod lectus viverra, ultrices quam. Quisque tristique nunc non turpis convallis, id ultricies urna volutpat. Nullam in quam erat. Phasellus vitae euismod ligula, vitae dictum lectus. Maecenas id feugiat leo. 
 

 
\t \t \t \t </p> 
 

 
\t \t \t </div> 
 

 
\t \t </div> 
 

 
\t </body> 
 

 
</html>

+0

不可能我認爲容器的容器高度是100%。 – claudios

回答

0

設置HTML,體高100%。

html, body { 
    height: 100%; 
} 
0

你可以在容器position:absoluteposition:fixed菜單嘗試應該工作

0

在你的CSS文件的頂部,試着從auto改變htmlbody的高度100%

html, body { 
    height: 100%; 
} 

貸記Travis

+0

啊,是的,我忘了提及,我也嘗試過,但如果'content'溢出,我不能滾動。 –