html – 如何用CSS拆分网页？

发布时间：2020-12-14 19:43:15 所属栏目：资源来源：网络整理

导读：是否可以使用CSS进行分割屏幕(水平),以便用户可以浏览屏幕上方切片上的部分网站并浏览屏幕下方的另一部分？解决方法您需要声明主div的高度值. 对于这个例子.我使用 50vh 声明它是屏幕的一半. 添加 overflow: auto 将允许您拥有滚动条. 否则,如果您没有设置

是否可以使用CSS进行分割屏幕(水平),以便用户可以浏览屏幕上方切片上的部分网站并浏览屏幕下方的另一部分？

解决方法

您需要声明主div的高度值.

对于这个例子.我使用50vh声明它是屏幕的一半.

添加overflow: auto将允许您拥有滚动条.
否则,如果您没有设置溢出并且#top内容无法被可用空间容纳,则它将溢出到底部.

body {
  margin: 0;
  padding: 0
}

#top,#bottom {
  width: 100%;
  height: 50vh;
  overflow: auto;
}

<div id="top">
  Lorem ipsum dolor sit amet,consectetur adipisicing elit. Velit qui corporis,repellat praesentium quas voluptatum soluta rerum incidunt repellendus eos ipsam numquam nostrum magni repudiandae dolorem,a similique,voluptatibus facilis.
  Lorem ipsum dolor sit amet,voluptatibus facilis.Lorem ipsum dolor sit amet,voluptatibus facilis.
</div>


<div id="bottom">
    Lorem ipsum dolor sit amet,voluptatibus facilis.
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!