html - Bootstrap 列在 iPad 纵向模式下的高度不同

Question

所以我正在制作的这个网站的纵向模式全都搞砸了。目前看起来像这样:

我想要的只是让 watch 垂直居中，这是在正常的桌面 View 中。

HTML:

<header>
    <div class="container">
        <div class="row">
          <div class="col-sm-7 col-md-7  col-xl-7 col-lg-7">
              <div class="header-content">
                  <div class="header-content-inner">
                      <h1>One for all. All for you.</h1>
                      <!-- <a href="#download" class="btn btn-outline btn-xl page-scroll">Start Now for Free!</a> -->
                  </div>
              </div>
          </div>
          <div class="col-sm-5 col-md-5  col-xl-5 col-lg-5" style="height: 100%">
            <div class="device-container vertical-align">
              <div class="cycle-slideshow" data-cycle-timeout="1500" data-cycle-transition="1500" data-cycle-fx="fadeout" data-cycle-pause-on-hover="#er-pauser">
                <img class="img-responsive device-img center-block" src="img/landing2.png" alt="">
                <img class="img-responsive device-img center-block" src="img/landing1.png" alt="">
                <img class="img-responsive device-img center-block" src="img/landing3.png" alt="">
                <img class="img-responsive device-img center-block" src="img/landing5.png" alt="">
                <img class="img-responsive device-img center-block" src="img/landing4.png" alt="">
                <img class="img-responsive device-img center-block" src="img/landing6.png" alt="">
              </div>
            </div>
          </div>
        </div>
    </div>
    </header>

CSS:

header {
        position: relative;
        width: 100%;
        min-height: auto;
        overflow-y: hidden;
        background: #47c0d7; /* Old browsers */
        background: -moz-linear-gradient(top, #47c0d7 0%, #e6f9ff 55%, #e6f9ff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #47c0d7 0%,#e6f9ff 55%,#e6f9ff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #47c0d7 0%,#e6f9ff 55%,#e6f9ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47c0d7', endColorstr='#e6f9ff',GradientType=0 ); /* IE6-9 */

    }
    header .header-content {
      text-align: center;
      padding: 100px 0px 0px;
      position: relative;

    }
    header .header-content .header-content-inner {
      width:100%;
      text-align: center;
      position: relative;
    /*  max-width: 500px;
    */  margin: 0 auto;
    }

    header .device-container {
    /*  max-width: 400px;*/
      height: 100%;
    /*  margin: 100px auto;
    */}

    header .device-img {
      left: 0;
      right: 0;
      width: 100%;
      margin: 0 auto;
      width: 300px;
    }

    @media (min-width: 768px) {
        header {
        min-height: 100%;
      }

      header .header-content {
        text-align: center;
        padding: 0;
        height: 100vh;
      }
      header .header-content .header-content-inner {
        text-align: center;
        max-width: none;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
      }

    .about-content .about-content-inner {
        text-align: justify;
        max-width: none;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
      header .header-content .header-content-inner h1 {
        margin-top: 0;
        margin-bottom: 30px;
        font-size: 55px;
        color: #363939;
        text-align: center;
      }
    .about-content .about-content-inner h3 {
        font-size: 20px;
        font-weight: 400;
      }
      header .device-container {
     /*   max-width: none;
        max-height: calc(0vh);
        margin: 100px auto 0;*/
        padding: 0;
        height: 100vh;
      }

它所在的列的高度不是 100%，它所在的容器(设备容器)似乎也没有容纳它的内容。

非常感谢您的帮助。抱歉，评论太多了。另外，如果有人知道为什么导航栏会延伸到页面之外，使右侧的浅蓝色列出现，请也告诉我。

Answer 1

设置100%在 float 框上不会成功 100% parent 高度，如你所料。从我看来，你最好的解决方案是使用

header .row {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

当然，这意味着您需要丢失 <h1> 上的巨大顶部填充，所以它实际上居中。如果您对它在桌面上的外观感到满意，只需将我的建议包装在 @media 中即可。查询。

还有一件事我要注意:你似乎使用了 col-xl-* Bootstrap 中不存在的类，但您似乎错过了 col-xs-*那些。这是故意的吗？如果没有，请更换它们。

这是一个 fiddle 我可以从你发布的代码中得到什么。

别忘了 autoprefix .