Question

因此我所制作的这个网站的肖像模式都搞砸了。目前看起来像这样：

我想要的只是让手表垂直居中，这是普通的桌面视图。

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%不会使其成为父级身高100%，正如您所期望的那样。从我看来，你最好的解决方案就是使用

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

当然，这意味着您需要丢失<h1>上的巨大顶部填充，因此它实际上居中。如果您对在桌面上的显示方式感到满意，只需将我的建议包含在@media查询中。

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

这里有一个fiddle，其中包含了您发布的代码所能提供的内容。

别忘了autoprefix。

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

1 个答案: