Question

我希望两个全高（100vh）和半高（50vw）的div彼此相邻放置（基本上填满整个页面）。但是，在Chrome和Firefox中，第二个div始终低于第一个div。如果我将高度降低到50vh，则两个div并排放置。奇怪的是，在jsfiddle.net中可以使用完全相同的代码。 https://jsfiddle.net/e6x2j0kr/

html, body {
background: red;
margin: 0;
padding: 0;
border: 0;
}

#container {
  height: 100vh;
}

#left {
  background: blue;
  width: 50vw;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  height: 100vh;
}

#right {
  background: yellow;
  width:50vw;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  height: 100vh;
}

<div id="container">
<div id="left">
  left
</div>
<div id="right">
  right
</div>
</div>

谢谢您的帮助。

Answer 1

使用vh经常会出现问题，这在很大程度上是因为滚动条会弄乱它。您可能已经注意到网页，您可以在其中稍微滚动一下。大约是一个滚动条的宽度。

在您的情况下，我认为正在发生的是一个很小的渲染问题，这导致存在滚动条，然后迫使该滚动条永久地需要一个滚动条。

如果您愿意使用其他CSS样式，建议您使用flex：

#Container {
  height: 100vh;
  width: 100vw;
  display: flex;
}

#Container > div {
  width: 50%;
}

#Child1 {
 background: #E6E;
}

#Child2 {
 background: #6EE;
}

<div id="Container">
  <div id="Child1"></div>
  <div id="Child2"></div>
</div>

我建议使用flex的原因是，无论如何，它将强制项目位于同一行。您可能会注意到奇怪的滚动内容。再次是vh问题，因此仅使用百分比可能会更好。

Answer 2

这很奇怪，它可以在代码段和jsFiddle中使用，但是我只是将其插入项目中，并以chrome打开了文件，看起来就像您说的那样。我认为视图宽度可能包括屏幕尺寸中的滚动条，这可能会使它溢出。

我设置了#right {float: right}，您可以看到它与左div重叠。但是，您可以将两者的宽度都设置为50％，这是可行的：

html, body {
    background: red;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: none;
}
    
#container {
    height: 100vh;
}

#left {
    background: blue;
    width: 50%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    float: left;
    height: 100vh;
}

#right {
    background: yellow;
    width: 50%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    float: right;
    height: 100vh;
}

<div id="container">
        <div id="left">
          left
        </div>
        <div id="right">
          right
        </div>
        </div>

彼此相邻的两个div不能浮动100vh

2 个答案: