Div高度100％，但不可調整大小

-2

我想要一個完全覆蓋我的頁面的div，但是當我調整瀏覽器窗口大小時，我不希望div可以調整大小。換句話說，這個100％的高度不應該指實際的窗口大小，而是指最大的窗口大小。Div高度100％，但不可調整大小

我想計算瀏覽器窗口最大高度，我希望我的div有這個高度。它應該是一個固定的高度，這樣，如果我調整我的窗口應該出現一個滾動條，讓我滾動內容

例如：如果您訪問本網站http://weareflourish.com/其主頁有一個背景覆蓋整個頁面（即使您以不同的分辨率訪問網站）。我想重現相同的效果

來源

2017-03-02 Diablo3000

我不明白你想達到什麼目的？ – Dherya

什麼是網址？這並不完全清楚。 – bamabacho

你能提供源代碼嗎？如果我們看不到您的問題，我們無法幫助 – samdd

這是純粹的CSS不可能的。

你有三個不同的值：

屏幕分辨率（固定）
瀏覽器尺寸（動態）
視維（動態）

你不能依靠屏幕分辨率因爲你不能保證，這是你的視口的實際大小。如果您改爲使用瀏覽器或視口尺寸，則會停留在瀏覽器調整大小時發生更改的動態尺寸。

您唯一能做的就是通過javascript確定視口的大小，並將div設置爲這個特定的大小。這樣它不會改變視口大小。

let div = document.querySelector("#yourElement"), 
 
height = window.innerHeight, width = window.innerWidth; 
 

 
div.style.height = `${height}px`; 
 
div.style.width = `${width}px`;

div{ 
 
border:1px solid red; 
 
box-sizing:border-box; 
 
} 
 
html,body,div{margin:0;padding:0;}

<div id="yourElement"> 
 
</div>

一個更復雜的方式是讓屏幕分辨率，瀏覽器計算和視口大小的差異，從屏幕分辨率它。減去。這可能會讓您很好地估計最大視口大小，但我不知道這是多麼強大的跨平臺。

我知道你可能有理由嘗試這樣做，但如果這是解決問題的好方法或必要方法，那麼你應該退後一步。

來源

2017-03-02 18:37:00 Christoph

但是，如果我用我的瀏覽器加載頁面沒有完全擴展，它會計算出這個尺寸 – Diablo3000

這是正確的。而且沒有其他選擇。無論如何，如果不是瀏覽器的初始大小，我們會說什麼參考大小 - 有些想象中的「這將是您的視口的最大大小」？也許你可能想重新思考你的整個方法。作爲web開發者，你必須學會適應用戶。很多人不會全屏運行瀏覽器，也不希望被迫以web開發者希望的方式使用它們。 – Christoph

首先用CSS視口高度設置<div>的高度（vh）。在CSS中執行此操作，以便在頁面加載時達到正確的高度。

div.fullheight { 
    height: 100vh; 
}

然後使用jQuery以像素爲單位取得這個高度並重新應用它作爲CSS的高度。

$('div.fullheight').css('height', $('div.fullheight').height());

來源

2017-03-02 18:37:28 Gwellin

Div高度100％，但不可調整大小

回答

相關問題