子元素上的高度100％无效
子元素上的高度100％无效
我知道可能有很多关于这个问题的问题，但没有一个真正帮助我解决问题，我一遍又一遍地尝试修复，但没有结果。
我要做的事情很简单，我有一个名为“container”的div，在其中有两个更多的div，“menu”和“content”。
我希望“menu” div在页面的右侧，并从“container”中获取全高度（100％），但没有起作用。
我尝试将body的高度设置为100％，但也不起作用，只有在使用px（例如5000px）设置高度时才起作用，但我不想使用固定的高度。
CSS / HTML：
html，body {
高度：自动;
}
body {
边距：0;
填充：0;
overflow-y：scroll;
}
.container {
浮动：右;
宽度：100％;
高度：100％;
背景颜色：灰色;
溢出：隐藏;
}
.menu {
浮动：右;
宽度：250px;
高度：100％;
背景颜色：绿色;
}
.content {
宽度：100％;
高度：100％;
字体：Tahoma;
字号：36px;
字重：粗体;
}
HTML：
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.
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.
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.
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.
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.
问题出现的原因是子元素的高度设置为100%时无效。解决方法是在CSS文件的顶部将html和body的高度从auto改为100%。代码如下：
html, body {
height: 100%;
}
这个解决方法来自于Travis的回答。
噢，我忘了提到，我也尝试过这个方法，但是如果content内容过多，无法滚动。
问题出现的原因是子元素的高度百分比设置不起作用。解决方法是在容器中使用position:absolute，并在菜单中使用position:fixed。
当我们想要设置子元素的高度为父元素的百分比时，有时会发现设置无效。这可能是因为父元素没有明确的高度，或者因为父元素的高度设置为百分比时，子元素的高度无法正确计算。
为了解决这个问题，我们可以在容器中使用position:absolute属性。这样，容器的高度将根据其内容的高度来计算，而不是根据父元素的高度。
然后，我们可以在菜单中使用position:fixed属性。这将使菜单相对于浏览器窗口固定，无论父元素的高度如何变化，菜单都将保持在相同的位置。
下面是一个示例代码，演示了如何使用上述方法解决子元素高度百分比不起作用的问题：
.container {
position: absolute;
}
.menu {
position: fixed;
}
通过使用position:absolute和position:fixed属性，我们可以确保子元素的高度百分比设置正常工作，无论父元素的高度如何变化。这种方法可以在各种网页布局中使用，以确保子元素的高度始终正确计算。
问题原因：当给html和body元素设置height为100%时，子元素的height属性不会自动继承父元素的高度。
解决方法：可以通过以下三种方法解决这个问题。
方法一：使用绝对定位和top、bottom属性。
html, body {
height: 100%;
}
.child-element {
position: absolute;
top: 0;
bottom: 0;
}
方法二：使用flex布局。
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
.child-element {
flex: 1;
}
方法三：使用Grid布局。
html, body {
height: 100%;
display: grid;
}
.child-element {
grid-row: 1 / -1;
}
以上三种方法都可以解决子元素无法继承父元素高度的问题。可以根据具体的需求选择其中一种方法来解决。