根據瀏覽器高度的響應傳送帶

Question

根據瀏覽器的高度，您將如何調整傳送帶的尺寸？

對於根據寬度調整，即時通訊能夠使它響應這個在CSS

@media (max-width: @screen-xs-max) { ... } 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } 
@media (min-width: @screen-lg-min) { ... } 

但使它走向高度敏感，林不知道我會怎麼做。

任何線索？

Answer 1

您可以使用css單元vh來使用屏幕高度目的。 100vh表示整個視口高度。 vh是動態的，所以它隨着你改變屏幕大小而改變。

這裏是fiddle

.carousel .item { 
    max-width: 100%; /*slider width*/ 
    max-height: 100vh; /*slider height*/ 
} 

Answer 2

謝謝薩欽Kanungo一個演示。

我和Max有同樣的問題。

.carousel { 
    height: 80vh; /*slider height equals to 80% of viewport height*/ 
    margin-bottom: 60px; 
} 
.carousel .item { 
    min-width:100%; 
    height:80vh; /*slider height equals to 80% of viewport height*/ 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 80vh; /*slider height equals to 80% of viewport height*/ 
} 

注：我使用的是引導3.3.6

但對我來說，這些設置工作