身高100％不适用于儿童元素
问题描述：
我知道可能有很多关于此事的问题，但他们都没有真正帮助我解决问题，我一直试图解决这个问题，一次又一次没有结果。身高100％不适用于儿童元素
我想要做的很简单，我有一个名为container的div，里面还有两个div，menu和content。
我希望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>
答
设置HTML，体高100％。
html, body {
height: 100%;
}
答
你可以在容器position:absolute和position:fixed菜单尝试应该工作
答
+0
啊，是的，我忘了提及，我也尝试过，但如果'content'溢出，我不能滚动。 –
不可能我认为容器的容器高度是100％。 – claudios