高度屏幕，但固定

我試圖做一個固定的位置DIV粘在頁面的底部，具有起始高度，屏幕（like vh）的70%。我將使其可調整大小與jQuery可調整大小。高度屏幕，但固定

問題是，如果我應用height: 70vh或height: 70%，當用戶調整瀏覽器高度時，div會調整大小，並且我想保持它不變。不知道該怎麼辦？

div { 
 
    position: fixed; 
 
    display: block; 
 
    bottom: 0; 
 
    width: 500px; 
 
    height: 70vh; 
 
    background-color: red; 
 
}

<div> 
 
</div>

查看全部網頁的摘要。

來源

2017-09-27 Adi Pîslaru

那麼你的意思是，DIV是沒有得到調整？因爲當我調整我的瀏覽器時，它正在調整大小。你能否詳細說明預期的內容？ – nabanita

我們只能做到這一點的'js'或'jQuery'或者如果你願意，你可以設置'最小height'固定'px'值。 – weBBer

@nabanita我希望它不會調整大小。 –

1. vh或%將相對於viewport或屏幕高度的高度。所以我們需要在dom負載中用javascript設置div的初始高度。

Next（調整大小部分）可以用CSS resize屬性完成。 ** PS：在div的右下角你可以看到調整大小圖標並進行大小調整。

document.getElementById("demo").style.height = window.innerHeight*.7+"px";

div { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 500px; 
 
    background-color: red; 
 
    resize:vertical; 
 
    overflow:auto; 
 
}

<div id="demo"></div>

來源

2017-09-27 13:14:07 nabanita

可以最小高度添加到DIV，以便它不會調整自身超越特定的高度。

喜歡這張

div { 
 
    position: fixed; 
 
    display: block; 
 
    bottom: 0; 
 
    width: 500px; 
 
    height: 70vh; 
 
    min-height: 500px; 
 
    background-color: red; 
 
}

<div> 
 
</div>

來源

2017-09-27 12:17:31

高度屏幕，但固定

回答

相關問題