如何使用固定位置獲取Bootstrap的列滿瀏覽器高度？

我需要做一個幻燈片，當用戶點擊一個特定的按鈕出現在右側。如何使用固定位置獲取Bootstrap的列滿瀏覽器高度？

<div class="col-md-3"> 
    <div class="card"> 
    content 
    </div> 
</div>

它需要有一個固定的位置，我想和右：我正與這個網站結構，引導4使其0;所以它堅持在右側。而且我也需要它是完整的瀏覽器高度。問題是，如果我用這個CSS，它延伸卡的寬度以及高度：

.card { 
position: fixed; 
right: 0; 
height: 100%; 
}

我也注意到，內容的底部往往在小屏幕上被隱藏。這是一個幻燈片，我需要它始終100％可見，同時仍然是全高。可能嗎？如果是這樣，我做錯了什麼，我該怎麼做呢？有人可以看看我的代碼，讓我知道嗎？

.card { 
 
    background-color: #bdbdbd; 
 
    text-transform: uppercase; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    background: #fff; 
 
    opacity: 1; 
 
    color: #29292b; 
 
    font-size: 10px; 
 
    text-decoration-color: #757575; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="col-md-3"> 
 
    <div class="card rounded-0 border-0"> 
 
    <div class="card-header border-0 p-0"> 
 
     <button type="button" class="close p-2"> 
 
     <span aria-hidden="true">x close</span> 
 
    </button> 
 
     <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200"> 
 
    </div> 
 
    <!-- /.card-header --> 
 

 
    <div class="card-block py-4 px-3"> 
 
     <h4 class="card-title mb-2">Title</h4> 
 
     <p class="card-text">Text 
 
     <span>Text</span> 
 
     <span>Text</span> 
 
     </p> 
 

 
     <h4 class="card-title mb-2">Title</h4> 
 
     <p class="card-text">Text</p> 
 

 
     <h4 class="card-title mb-2">Title</h4> 
 
     <p class="card-text">Text</p> 
 

 
     <div class="form-group"> 
 
     <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="Placeholder text here..."></textarea> 
 
     </div> 
 
    </div> 
 
    <!-- /.card-block --> 
 

 
    </div> 
 
    <!-- /.card --> 
 
</div>

來源

2017-08-30 Retros

你能告訴我們你是如何想有一個峯它看起來？ [Codepen]（https://codepen.io/anon/pen/OjrVxy） –

我沒有圖像，但我希望卡是全高，而內容不會在較小的屏幕上溢出。我試過使用100vh，但是除了桌面之外，其他東西都會混淆。 – Retros

您可以通過添加正面和負面的填充像這樣把它關閉：

.col-md-3 { 
    padding-bottom: 100%; 
    margin-bottom: -100%; 
}

jsbin：http://output.jsbin.com/gajilaj

來源

2017-08-30 16:06:03

你確定這是最好的方法嗎？這似乎有點凌亂？我嘗試過使用100vh，但這也造成了手機的混亂。：/ – Retros

如何使用固定位置獲取Bootstrap的列滿瀏覽器高度？

回答

相關問題