如何水平拆分网页

Question

我想水平拆分一个网页，这样我就可以滚动一个网站，而另一个网站保持静止。但我真的很难做到这一点。我从W3CHOOLS中找到了以下代码，但它只能垂直工作。

HTML：

<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
<h2>Jane Flex</h2>
<p>Some text.</p>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
<h2>John Doe</h2>
<p>Some text here too.</p>
</div>
</div>

CSS：

/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: #111;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}

求你了，我需要帮助。

Answer 1

我最近在css vh和vw中使用了一个巧妙的技巧。大体上宽度：100vw高度：100vh

将图元设置为视图高度的100%和视图宽度的100%。

听起来你可以利用这一点，并拥有2个div或元素，两者都具有50vh。

<div style="height:50vh">1</div>
<div style="height:50vh">2</div>

理论上，这将给你两个div，每个div占据视图高度的一半。

那么您只需要设置overflow-x:scroll或overflow-x:auto即可添加滚动条