Question

要详细说明我的问题，我有2个div。其中一个是主导航，在我的导航下面我有一个旋转木马（bootstrap）。当用户访问页面时，我希望旋转木马完全适合页面底部。只是为了美学的缘故。我知道我可以将旋转木马的高度设置为例如400px，但每个设备的屏幕是不同的，我认为如果旋转木马的底部适合屏幕的底部，无论窗口的大小，它将看起来更专业和抛光。

Answer 1

您可以考虑利用CSS's viewport-based units，例如vh和vw，它们分别使用可用视口宽度和高度的百分比：

.your-carousel {
    /* This will occupy 100% of the available viewport */
    height: 100vh;
}

这在most modern browsers中受支持，所以如果您已经在使用Bootstrap，那么您应该没问题。

Answer 2

位置：固定; 底部：0;

你能分享你的HTML吗？如果有的话，很乐意提供帮助。

Answer 3

This is my html by the way:

    <body>

    <!-- nav -->
    <div class="container">
        <a id="logo" class="font-raleway text-center" href="#">Denley</a>
        <br>
        <nav class="navbar navbar-default bold">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">WOMEN</a></li>
                    <li><a href="#">MEN</a></li>
                    <li><a href="#">SHOES</a></li>
                    <li><a href="#">ACCESSORIES</a></li>
                    <li><a href="#">SALE OFF</a></li>
                    <li><a href="#">COLLECTIONS</a></li>
                    <li><a href="#">CONTACTS</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div><!-- /.container -->
    <div class="row">
        <div class="col-xs-12">
            <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 col-md-2 col-md-offset-5">
                <div class="col-xs-3 icons"><img src="images/icons/account.png"></div>
                <div class="col-xs-3 icons"><img src="images/icons/wish_list.png"></div>
                <div class="col-xs-3 icons"><img id="cart-icon" src="images/icons/cart.png"></div>
                <div class="col-xs-3 icons"><img src="images/icons/search.png"></div>
            </div>  
        </div><!-- /col-xs-12 -->
    </div><!-- /row -->
<div class="row">
  <div class="container-fluid">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="images/test.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
        <div class="carousel-caption">
          ...
        </div>
    </div>
  ...
  </div><!-- /carousel-inner -->

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  </div>

如何制作2个div来填充100％的视口高度

3 个答案: