-1

我正在尝试创建一个网站，其主要内容始终位于首页上（70% 顶部和 30% 底部）。我曾尝试使用 split.js，但结果仍然很糟糕，因为每当我低于任何主要断点（1280、1024、1980px）时，一切都会中断。

这是网站 - https://lknahk.ee/我正在努力，我将很快向公众开放，但我无法让主页在移动设备和屏幕上正常工作，所以我在这里寻求帮助至于我该怎么做。我知道垂直分割屏幕更容易，因为内容可以在下面流动，但我不希望任何内容为用户推送滚动。

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

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

谢谢

4

2 回答 2

0

我已经推断出问题来自我用于 wordpress 的名为“Carousel Anything”的插件。我所有的主要内容都放在里面，这是响应视图关闭的错误，所以我将把我的问题直接提交给插件的作者。

于 2018-03-17T22:35:25.933 回答
0

我将首先按如下方式设置您的 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>

于 2018-03-17T18:36:09.190 回答