Question

我试图在图片中获得此布局，但看起来DIV标签不符合CSS规则。我认为这个问题是因为我试图将它们设置为百分比。我需要这种布局来遵循屏幕尺寸。我不希望任何滚动显示。此外，如果我将显示器侧向转动，它仍然会遵循布局。

#one {
  height: 20%;
  width: 45%;
  background-color: #66F;
  float: left;
}

#two {
  background-color: #FC3;
  height: 40%;
  width: 45%;
  float: right;
}

#three {
  background-color: #0CC;
  float: left;
  height: 20%;
  width: 45%;
}

#four {
  background-color: #CF3;
  height: 10%;
  width: 80%;
  float: left;
  margin-right: 10%;
  margin-left: 10%;
}

#five {
  background-color: #F06;
  float: left;
  height: 40%;
  width: 45%;
}

#six {
  background-color: #9C0;
  float: right;
  height: 20%;
  width: 45%;
}

#seven {
  background-color: #3FF;
  float: right;
  height: 20%;
  width: 45%;
}

#eight {
  background-color: #396;
  height: 10%;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
}

<body>
  <div id="one">one</div>
  <div id="two">two</div>
  <div id="three">three</div>
  <div id="four">four</div>
  <br>
  <div id="five">five</div>
  <div id="six">Six</div>
  <div id="seven">Seven</div>
  <div id="eight">Content for id "eight" Goes Here</div>
</body>

任何帮助？

Layout Image

Answer 1

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

height: 20vh;
width: 40vw;

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

Answer 2

如果您使用百分比作为高度，则必须为所有父元素定义高度，最高为一个具有固定高度或高达body和html的高度，通常为{{1} }}：

（在您的示例中，您的DIV和height: 100%;之间没有其他父元素，因此一条规则就足够了）

＆＃13;

body

＆＃13;

html,
body {
  height: 100%;
}

#one {
  height: 20%;
  width: 45%;
  background-color: #66F;
  float: left;
}

#two {
  background-color: #FC3;
  height: 40%;
  width: 45%;
  float: right;
}

#three {
  background-color: #0CC;
  float: left;
  height: 20%;
  width: 45%;
}

#four {
  background-color: #CF3;
  height: 10%;
  width: 80%;
  float: left;
  margin-right: 10%;
  margin-left: 10%;
}

#five {
  background-color: #F06;
  float: left;
  height: 40%;
  width: 45%;
}

#six {
  background-color: #9C0;
  float: right;
  height: 20%;
  width: 45%;
}

#seven {
  background-color: #3FF;
  float: right;
  height: 20%;
  width: 45%;
}

#eight {
  background-color: #396;
  height: 10%;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
}

＆＃13;

Answer 3

你可以将它添加到你的CSS：

div {
  overflow:hidden;
}

这将隐藏所有滚动条。然而，仅凭这一点是不够的，因为身体，html宽度和高度样式可能会造成问题（参见here）。解决方案是在CSS中添加类似的内容：

html,body {
 overflow:hidden;
}

请参阅demo

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

我确实找到了一种方法来使用CSS vh和vw测量单位并保持滚动条完全隐藏，只要代码指定html和body的溢出被隐藏;见demo

DIV不遵守CSS规则。有任何想法吗？

3 个答案: