如何在div上最大化bootstrap滑块/轮播？

Question

我有一个html代码，希望最大化div内的轮播？我应该包括哪些属性才能实现这一目标？

当前结果与旋转木马一起有空白部分。我使用bootstrap样式来减少我的CSS样式。

＆＃13;

＆＃13;

/* for testing only */
.item img {width: 100%; height: auto}

BODY {
    background-color: #FFF;
    overflow : hidden;
    width : 100%;
    margin : 0px;
    }

.page{
    display: block;
    width: 100%;
    min-height: 800px;
    overflow: auto;
    margin: 0px auto 0px auto;
    box-sizing: border-box;
    }

.pageClockPanel{
    background-color: #333;
    position: fixed;
    top : 0px;
    left : 0px;
    clear: none;
    width: 60%;
    height : 10%;
    padding: 10px; 
    }

.pageRightPanel{
    background-color: #1A237E;
    position: fixed;
    top : 0px;
    right : 0px;
    clear: none;
    width: 40%;
    height : 87%;
    box-sizing: border-box;
    padding: 10px; 
    }

.pageLeftPanel{
    background-color: #FFF;
    position: fixed;
    top : 10%;
    left : 0px;
    clear: none;
   width: 60%;
    height : 100%;
    box-sizing: border-box;
    padding: 0px; 
    }

.pageBottomPanel{
    background-color: #333;
    position: fixed;
    bottom : 0px;
    right: 0px;
    clear: none;
    height: 13%;
    width: 100%;
    box-sizing: border-box;
    padding: 10px; 
    }
div.pageLeftPanel .test{
    background-color: #FFF;
    height : 100%;

}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page">
 <div class="pageClockPanel">

 </div>
 <div class="pageRightPanel">

 </div>
   <div class="pageLeftPanel">
        <div class="test">
                <div id="myCarousel" class="carousel slide slide-custom" data-ride="carousel" >
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
              </div>

              <div class="item">
                <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
              </div>

              <div class="item">
                <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
              </div>
            </div>
        </div>
        </div>

 </div>
  <div class="pageBottomPanel">

 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在css List<String> scopes = Lists.newArrayList("https://www.googleapis.com/auth/youtube"); try { // Authorize the request. Credential credential = Auth.authorize(scopes, "addsubscription"); // This object is used to make YouTube Data API requests. youtube = new YouTube.Builder(Auth.HTTP_TRANSPORT, Auth.JSON_FACTORY, credential).setApplicationName( "youtube-cmdline-addsubscription-sample").build(); 中添加此行 如果您使用.item img {width: 100%; min-height: 80vh}属性，它可以帮助您

vh

.item img {width: 100%; min-height: 80vh}

body {
    background-color: #FFF;
    overflow : hidden;
    width : 100%;
    margin : 0px;
    }

.page{
    display: block;
    width: 100%;
    min-height: 800px;
    overflow: auto;
    margin: 0px auto 0px auto;
    box-sizing: border-box;
    }

.pageClockPanel{
    background-color: #333;
    position: fixed;
    top : 0px;
    left : 0px;
    clear: none;
    width: 60%;
    height : 10%;
    padding: 10px; 
    }

.pageRightPanel{
    background-color: #1A237E;
    position: fixed;
    top : 0px;
    right : 0px;
    clear: none;
    width: 40%;
    height : 87%;
    box-sizing: border-box;
    padding: 10px; 
    }

.pageLeftPanel{
    background-color: #FFF;
    position: fixed;
    top : 10%;
    left : 0px;
    clear: none;
   width: 60%;
    height : 100%;
    box-sizing: border-box;
    padding: 0px; 
    }

.pageBottomPanel{
    background-color: #333;
    position: fixed;
    bottom : 0px;
    right: 0px;
    clear: none;
    height: 13%;
    width: 100%;
    box-sizing: border-box;
    padding: 10px; 
    }
div.pageLeftPanel .test{
    background-color: #FFF;
    height : 100%;

}