Html 在css中没有任何内容的情况下，如何设置高度=100%？

对不起，我的英语。。。 我想使边栏的100%的页面高度。我设置html:100%，然后设置高度：100%。但正如您在屏幕截图中看到的，侧边栏不起作用。高度等于里面内容的高度

这是我为此编写的css代码。我还将视点用于侧边栏

html{
框大小：边框框；
身高：100%；
}
*,
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：继承；
}
身体{
字体系列：Tahoma，无衬线；
}
主体p{
字体系列：“投石机MS”，无衬线；
}
梅因先生{
宽度：80%；
身高：100%；
背景色：#243E36；
颜色：#F1F7ED；
浮动：左；
位置：相对位置；
}
标题{
文本对齐：居中；
保证金：20px自动；
边框底部：2px实心#E0EEC6；
宽度：30%；
垫底：15px；
}
收割台h1{
颜色：#C2A83E；
}
标题p{
边缘顶部：10px；
文本转换：大写；
字间距：10px；
字母间距：5px；
}
部分{
颜色：#212121；
填充：0 20px；
}
文章{
宽度：50%；
边缘底部：30px；
浮动：左；
}
第h2条{
填充：15px；
}
第p条{
文本对齐：对齐；
填充：0 15px；
}
页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
背景色：#7CA982；
文本对齐：居中；
}
旁白{
宽度：20%；
最小高度：100%；
最大高度：100%；
背景色：#E0EEC6；
浮动：左；
}
.小组：之前，
.小组：之后{
内容：“；
显示：表格；
}
.小组：之后{
明确：两者皆有；
}
.组{
缩放：1；
}

我的个人笔记本
欢迎来到我的页面

标题1
发布于2020/07/23

Lorem ipsum dolor sit amet，奉献精英。多洛伦，塞奎·尤斯托！法塞尔，库斯
暂时性真实是指对所拥有的、同等的、不相似的权利的合理解释
自由的身体

&抄袭；我的Nootbook

边栏

一种方法是在侧边栏div元素中使用内联CSS

`

"

`

---

我希望这个例子能给你一个更好的想法。

你的问题是你使用了2个浮动元素，浮动元素不考虑高度：100%

解决方案#1:浮动1个div，另一个使用左边距

html，正文{
身高：100%；
}
c.集装箱{
身高：100%；
}
c.内容{
浮动：左；
宽度：80%；
}
.c-侧边栏{
左缘：80%；
身高：100%；
背景：红色；
}

内容
边栏

没有代码很难给出答案，但你可以尝试使用

flex

或

grid

进行布局。你能为它创建一个提琴吗？我把css代码扫描你把html放在每个元素所在的位置只是为了一个想法吗？你可以删除整个文本代码中的问题是因为你使用了float，一旦你使用float，高度就会改变尽可能小。是的，但随着页面高度的增加，它不起作用。请尝试使用侧边栏div的位置固定。我已经编辑了代码，请参考我的示例。我知道我可以使用flex解决这个问题，但我想知道这个问题的原因，并找到修复方法，实际上它与flex无关，你能提供代码a吗更多？我没有看到任何问题，侧栏显示高度。你想要什么？左边的布局不使用Flex？我想你可以考虑使用1浮点div和另一个边栏，左边是边距，而不是浮动的2个元素。

   <div class="sidenav" style="height:100vh;position: fixed;">
             <a href="#about">About</a>
             <a href="#services">Services</a>
             <a href="#clients">Clients</a>
             <a href="#contact">Contact</a>
            </div>"