更新/编辑

Question

我正在尝试创建一个底部有页脚的全屏滑块。使滑块全屏很容易，但添加“页脚”似乎不是（对我来说）。例如，滑块将有一张照片，其下方的div将显示有关照片的详细信息，所有设备上的所有照片都应显示为“着陆页”而不会滚动。

我的大脑告诉我创建一个100vh的包装容器来填充100％的视图高度，然后创建一个页脚 - 对于这个例子 - 在150px的设置高度然后让滑块填充剩余的差异在包装容器中遗留下来，理论上似乎是正确的，但我似乎无法弄清楚如何在不使用脚本的情况下实际执行此操作。我对脚本没问题，只是想知道是否有一种纯粹的css方式来做我想要完成的事情。

在这个具体的例子中，我尝试在页脚div上进行绝对定位，底部为0，以便拥抱到主包装器的底部，这样可以起作用（由于底部导航条而在移动设备上尤其是iPhone），但是当然，由于绝对位置似乎有效，在滑块div上设置100％高度将忽略页脚div并将其高度设置为包装容器的100％。

是否可以设置bottom：0，但是滑块div与绝对定位的页脚div不重叠？

有没有更好的方法使用纯css一起完成这一切？我迷失了吗？

这是我想要完成的图表

建议之前

原始代码

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>test page</title>
  <meta name="description" content="test page">
  <meta name="author" content="Test">

  <style>
  body {
    margin: 0px;
  }
  .page-wrapper {
    height: 100vh;
    background-color: red;
  }
  .slider {
    height: 100%;
    background-color: blue;
  }

  .slider-footer {
      height: 150px;
      background-color: green;
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  </style>

</head>

<body>
  <div class="page-wrapper">
      <div class="slider">
      </div>
      <div class="slider-footer">
      </div>
  </div>
</body>
</html>

更新/编辑

此外，如下所示，.slider上的calc（100vh -150px）效果更好。它在桌面上运行得非常好，但是当我在iPhone上拉起时，并没有那么多。

更新的样式代码

 <style>
  body {
    margin: 0px;
  }
  .page-wrapper {
    height: 100vh;
    max-height: 100vh;

    background-color: red;
  }
  .slider {
    background-color: blue;
    height: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
  }

  .slider-footer {
      height: 150px;
      background-color: green;
      position: absolute;
      bottom: 0;
      width: 100%;
  }
  </style>

iPhone似乎会自动调整视图，因为设备上的safari导航按钮较低。它看起来像是将.page-wrapper拉得更远。我试图通过在.page-wrapper中添加max-height：100vh来防止这种情况，但这似乎根本没有做任何事情

以下是iPhone上的页面

事情看起来很完美，就像它们应该的方式......

直到你向下滚动

多数事情变得有些奇怪......

似乎，至少在iPhone上的safari，100vh考虑到底部导航栏，但是slider.footer的绝对定位忽略了它并将其自我设置到safari底部导航栏的顶部。我明白为什么苹果会这样做，因为导航栏在默认情况下总是存在，直到你向下滚动，但这显然导致了我想要完成的问题......

我认为这是一个iPhone / Safari问题，或者我的html / css技能是不是很合适？

Answer 1

我做的事情如下：

.slider {
    height: calc(100vh - 150px);
}

希望这会有所帮助：）

Answer 2

你可以试试这个：

$('input[type="checkbox"]').on('change', function(){
    var $select = $(this).parents('.checkbox').find('select');
    console.log($select.length);
    $select.val("1");
    
    if (!$(this).is(':checked')) {
    console.log('uncheck');
      $select.val("-1");
    }
});

Answer 3

另一种方法是：

.page-wrapper { position: relative }
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 150px;
}

希望这（最终）有所帮助：）

绝对定位而不会溢出到另一个div

这是我想要完成的图表

原始代码

更新/编辑

更新的样式代码

以下是iPhone上的页面

直到你向下滚动

3 个答案: