集裝箱分區不是100％不同高度的電腦屏幕？

我有一個由html代碼和CSS組成的頁面所有的CSS都與我的筆記本電腦裏的罰款工作，我正在開發我的頁面，但我現在的問題是，當我嘗試在另一臺計算機（臺式計算機）更大的屏幕寬度是好的，但高度不是屏幕的100％高度。正如你在圖片中看到的那樣，邊框顏色爲橙色，這是我的容器div，現在在橙色邊框下面，有一個空間，這是我的問題。集裝箱分區不是100％不同高度的電腦屏幕？

CSS

body{ 
background-color: #e9e8e8; 
font-family: verdana, geneva, sans-serif; 
font-size: 16px; 
} 

.container-fluid{ 
position: relative; 
width: 100%; 
height: 100%; 
padding: 0; 
margin: 0; 
overflow: hidden; 
border: 3px solid orange; 
}

這是圖像

#slider{ 
width: 80%; 
height: 550px; 
margin: 19.5px auto; 
-webkit-box-shadow: 0 8px 30px -6px black; 
-moz-box-shadow: 0 8px 30px -6px black; 
box-shadow: 0 8px 30px -6px black; 
overflow: hidden; 
} 
.items{ 
max-height: 100%; 
height: 550px; 
min-width: 100%; 
width: 100%; 
overflow: hidden; 
} 
.items img{ 
width:100%; 
height:550px; 
}

頁腳

.footer{ 
text-align: center; 
-webkit-box-shadow: 0 8px 30px -6px black; 
-moz-box-shadow: 0 8px 30px -6px black; 
box-shadow: 0 8px 30px -6px black; 
background: -moz-linear-gradient(center top, #2ebf16, #217812); 
background: -webkit-gradient(linear, left top, left bottom, from(#2ebf16), to(#217812)); 
background: -o-linear-gradient(top, #2ebf16, #217812); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2ebf16', EndColorStr='#217812'); 
}

來源

2016-06-10 Trojan

因爲這個？ 'height：550px;' – Sherlock

是的，這是我的滑塊的高度..所以，我該怎麼辦？ – Trojan

'height：100vh'將主體滑塊的值更改爲此值，其含義是根據視圖端口將元素的高度設置爲100％。所以你要做的第一件事就是將滑塊高度設置爲'100vh'並將你的物品高度設置爲繼承:) – Sherlock

這是因爲屬性高度不是基於ViewPort的。

您可以使用viewport relative lengths或使用某些方法來檢視高度。

實例方法：

可以定義在所有高度元素100％;
使用位置：絕對;頂部：0;底部：0;

來源

2016-06-10 02:42:30

要擺脫橙色邊框下方的空白，您需要指定該div的視口高度。像這樣

div.container { 
height: 100vh; // This does the trick 
width: 100%; 
border: 2px solid #FF0000; 
}

你可以閱讀更多關於vh這裏，https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

來源

2016-06-10 02:30:04 akinjide

我應該將my.container-fluid改爲di.container嗎？ – Trojan

我試過你的代碼，現在它的屏幕100％，但是還有一個問題，我的頁腳停留在同一區域。它不會下降 – Trojan

你需要使頁腳的絕對值爲 – akinjide

嘗試使用：

body, html{ 
    height: 100%; 
}

我看到你在使用容器液體類，所以你可能會使用自舉，這也可能會超越某些東西。

來源

2016-06-10 02:30:47 PossessWithin

我已經嘗試過，但仍然不工作 – Trojan

嗯，不是很推薦，但嘗試添加高度：100％！重要; – PossessWithin

我試圖把高度：100vh;它的工作和它現在100％的屏幕，但問題是，頁腳停留在同一區域，它不會下降 – Trojan

集裝箱分區不是100％不同高度的電腦屏幕？

回答

相關問題