Html div不遵守CSS规则。有什么想法吗？

我试图在图片中显示这个布局，但是看起来DIV标签不符合CSS规则。 我认为问题是因为我试图将它们设置为百分比。我需要这个布局，以遵循屏幕大小。我不想看到任何滚动条。此外，如果我把显示器转向一边，它仍然会遵守布局

#一个{
身高：20%；
宽度：45%；
背景色：#66F；
浮动：左；
}
#两个{
背景色：#FC3；
身高：40%；
宽度：45%；
浮动：对；
}
#三{
背景色：#0CC；
浮动：左；
身高：20%；
宽度：45%；
}
#四{
背景色：#CF3；
身高：10%；
宽度：80%；
浮动：左；
保证金权利：10%；
左边距：10%；
}
#五{
背景色：#F06；
浮动：左；
身高：40%；
宽度：45%；
}
#六{
背景色：#9C0；
浮动：对；
身高：20%；
宽度：45%；
}
#七{
背景色：#3FF；
浮动：对；
身高：20%；
宽度：45%；
}
#八{
背景色：#396；
身高：10%；
宽度：80%；
保证金权利：10%；
左边距：10%；
}

一
二
三
四


五
六
七
id“八”的内容在这里

宽度/高度百分比相对于最近定位的祖先。 如果要相对于屏幕大小调整元素的大小，可以改用视口宽度/高度：

height: 20vh;
width: 40vw;

---

将是视口高度的20%，视口宽度的40%。

如果使用高度百分比，则必须为所有父元素定义高度，最高为一个具有固定高度的元素，或最高为

主体
和
html
，通常为
高度：100%：

（在您的示例中，div和
body
之间没有其他父元素，因此一条规则就足够了）


html，
身体{
身高：100%；
}
#一个{
身高：20%；
宽度：45%；
背景色：#66F；
浮动：左；
}
#两个{
背景色：#FC3；
身高：40%；
宽度：45%；
浮动：对；
}
#三{
背景色：#0CC；
浮动：左；
身高：20%；
宽度：45%；
}
#四{
背景色：#CF3；
身高：10%；
宽度：80%；
浮动：左；
保证金权利：10%；
左边距：10%；
}
#五{
背景色：#F06；
浮动：左；
身高：40%；
宽度：45%；
}
#六{
背景色：#9C0；
浮动：对；
身高：20%；
宽度：45%；
}
#七{
背景色：#3FF；
浮动：对；
身高：20%；
宽度：45%；
}
#八{
背景色：#396；
身高：10%；
宽度：80%；
保证金权利：10%；
左边距：10%；
}
1
二
三
四


五
六
七
id“八”的内容显示在此处
您可以将其添加到CSS中：

div {
  overflow:hidden;
}

这将隐藏所有滚动条。但是，仅此一项是不够的，因为主体、html宽度和高度样式可能会造成问题（请参阅）。解决方案是在CSS中添加类似的内容：

html,body {
 overflow:hidden;
}

看

使用CSS vh和vw单元也是隐藏Ash提到的滚动条的另一种方式（见下文）。唯一的缺点是，如果用户将浏览器窗口的大小调整为较小的大小，则可能会出现滚动条（请尝试）

我确实找到了一种方法来使用CSS vh和vw度量单位，并保持滚动条完全隐藏，只要代码指定html和正文的溢出是隐藏的；看
我不会为你做这个。我想你想学怎么做。我的建议是，首先考虑行的布局，将部分包装成4个div，然后设置行的宽度为100%。。。继续尝试。如果父项指定了其高度，则高度百分比表示父项高度的百分比。因此，如果您想要屏幕高度的百分比，则需要添加
html，body{height:100%}
。仅此而已。不知道如何将百分比更改为大众/vh才能做到这一点。我只是用钢笔试了一下，看起来还不错。另一方面，如果可能的话，我会避免使用
float
，因为它会将元素从文档流中移除。一个更好的解决方案可能是在左元素和右元素之间添加一个空的flex元素；看见