Question

您好我在我的头文件中实现了Swiper，但是我在定位它时遇到了问题。

我想要什么： 导航菜单顶部的FUll高度Swiper

我有什么： 限高Swiper

或覆盖导航菜单的全高

从我对css的非常有限的理解，我认为我应该将我的 header.css 定位为相对的，并将 element-wise css 定位为绝对的。问题是我不知道将用Swiper显示的图片的确切尺寸（定位为绝对）所以我不能将绝对用于其他标题元素。但我可能错了。

我为我对css / html的有限知识和误解道歉。非常新的学习者。

模板文件：

有限身高的siwper

<header id="header" class="header" >
  <div class="header-swiper"> 
        {%- include 'swiperheader.swig' %} 
   </div>
  <div class="header-inner"> 
          {%- include '_partials/header.swig' %} 
   </div>
</header>

覆盖导航菜单的全高度狙击手

<header id="header" class="header" >
  <div class="header-swiper"> 
        {%- include 'swiperheader.swig' %} 
   </div>
  <div class="header-inner"> 
          {%- include '_partials/header.swig' %} 
   </div>
</header>

CSS结构：

主要css：

.header { position: relative; background: $head-bg; height: 100%;}

.header-swiper { height: 100%; }
.header-inner { position: relative; height: 100%; }

@import "site-meta";
@import "site-nav";
@import "menu";

Swiper css：

.swiper-container {
      position: absolute;
      width: 100%;
      height: 30%;                                                                                                     
    }

其他标题元素css：

站点meta.css

.site-meta {                                                                                                           
  margin: 0;
  text-align: $site-meta-text-align;

  +mobile() { text-align: center; }
}

.brand {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  color: $brand-color;
  background: $brand-bg;
  border-bottom: none;
  &:hover { color: $brand-hover-color; }
}

.logo {
  display: inline-block;
  margin-right: 5px;
  line-height: 36px;
  vertical-align: top;
}

.site-title {
  display: inline-block;
  vertical-align: top;

站点nav.css：

.site-nav-toggle {                                                                                                     
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  +mobile() {
    display: block;
  }

  button {
    margin-top: 2px;
    padding: 9px 10px;
    background: transparent;
    border: none;
  }
}

.site-nav {
  +mobile() {
    display: none;
    margin: 0 -10px;
    padding: 0 10px;
    clear: both;
    border-top: 1px solid $gray-lighter;
  }

menu.css：

.menu {
  margin-top: 20px;
  padding-left: 0;
  text-align: center;
}

.menu .menu-item {
  display: inline-block;
  margin: 0 10px;
  list-style: none;

  @media screen and (max-width: 767px) {
    margin-top: 10px;
  }

完整的swiperheader.swig代码

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      position: absolute;
      width: 100%;
      height: 50%;
    }
    .swiper-slide {
			position: relative;
      height:auto;
      background-position: center;
      background-size: cover;
    }
    .swiper-slide.background-image {
			position: relative;
    }
  </style>

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)">WCO</div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

Answer 1

我不太了解你想要实现的目标。如果您想要获得一个全高度滑动滑块，您需要将滑动容器类中的高度设置为100％而不是50.当然，滑动滑块将覆盖割台的第二部分。原因是，您将标题的高度设置为100％。因此，具有100％高度的滑动滑块将简单地覆盖整个头部。

如果你想拥有一个100％的傻瓜，而你的标题的第二部分就在这张幻灯片下方，那就

<div class="header-inner"> 
      {%- include '_partials/header.swig' %} 
</div>

部分位于</header>标记之外。

如果你想要一个100％的傻瓜，你的傻瓜顶部的第二个内容只是把

<div class="header-inner"> 
      {%- include '_partials/header.swig' %} 
</div>

在滑动滑块内。

如果您尝试实现其他目标，请向我解释您需要更改的内容。

Swiper相对于标题

1 个答案: