如何使用固定位置获取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的列满浏览器高度？

回答

相关问题