Question

网页看起来不错。但是，在更改浏览器窗口大小时，会上下移动容器的内容。因此它要么留下很多容器可用空间，要么只是消失（就像它在下一个容器下面）。

但我希望它始终在容器内部具有相同的比例。

这是我的代码：

  .first {
  padding-left: 5%;
  }

   .second {
       padding: 80px 50px 0px 70px;
       background-size: cover;
    }

    .fourth {
        margin-top: 7%;
    }

    .third {
     padding-top: 80px;
          padding-bottom: 65px;
          height: 678px;
          position: relative;
          width: 100%;
          min-height: auto;
          overflow-y: hidden;
          background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
          background-size: cover;
    }

    .selling-text {
        font-family: Ubuntu;
        font-size: 20px;
        padding-top: 27%;
        text-align: center;
        color: black;
        margin-left: 2%;
    }


    .second-block {
        background: #F2EADC;
        height: 500px;
         background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
         background-size: cover;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
    <div class="col-md-6">
        <div class="device">
            <div class="screen">
                <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
                <img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="second">
            <img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
            <div class="fourth">
                <button type="button" class="button  btn-block">MENU</button>
            </div>
        </div>
    </div>
</div>


<div class="second-block container-fluid">
    <div class="col-md-6">
        <div class="screen">
            <p class="selling-text">
                See the best cake recipes.
                Trusted recipes for chocolate cake,
                white cake, banana cakes,
                and carrot cakes with photos and
                tips from home cooks.
            </p>
        </div>
    </div>

    <div class="col-md-6 second">
        <div class="videoWrapper shadow">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

</div>

我不知道为什么JSFiddle不能与jQuery 1.11.1一起使用，它看起来与我在本地连接它看起来不同。

Answer 1

好的，我认为问题在于<div class="third container-fluid">的固定高度，其高度为678像素。更具体一点：当您调整窗口大小时列移动时，固定高度会变成一个问题，因为您的容器的px小于子元素的组合高度 - col的。

这是JSFiddle，其中我刚刚注释了固定高度

容器内容在窗口调整大小时改变比例

1 个答案: