Question

我正在尝试创建一个主要内容在家中的网站总是分开（70％顶部和30％底部）。我已经尝试过使用split.js，但结果仍然是垃圾，因为每当我在任何主要断点（1280,1024,1980px）之下，一切都会中断。

这是我正在制作的网站https://lknahk.ee/，我很快就会向公众开放，但我无法让这个主页在手机和屏幕上正常运行，所以我在这里问寻求帮助我应该怎么做。我知道垂直分割屏幕更容易，因为内容可以在下面流动，但我不希望任何内容为用户推送滚动。

链接到网站的准系统codepen - https://codepen.io/bleedeagle/pen/zWBqLj

<div class="split-wrapper">
    <section id="one" class="split"></section>
    <section id="two" class="split"></section>
</div>

由于

Answer 1

我首先要设置你的html，如下所示。这将为您提供70/30的顶部和底部拆分，而不使用split.js函数。然后，在顶部和机器人div中确保您的图像缩放。如果您需要帮助，请告诉我。

通过设置html的方式，您可以使用占据屏幕顶部和底部的div。

html,body{
   height:100%;
   overflow:hidden;
   margin:0}
   
   
#container{
   height:calc(100% - 20px);
   border:10px solid black;}
   
#top{
   height: calc(70% - 10px);   
   border:5px solid red}
   
#bot{
   height:calc(30% - 10px);   
   border:5px solid green}

<html>
   <body>
      <div id='container'>
         <div id='top'>
         </div>
         <div id='bot'>
         </div>
      </div>
   <body>
<html>

Answer 2

我已经推断出问题来自于我用于wordpress的插件，名为“Carousel Anything”。我的所有主要内容都被置于其中，这就是故障响应视图已关闭所以我将把我的问题转发给插件的作者。

水平全屏拆分网站

2 个答案: