使用css/html調整div的大小，但有一個catch

我正在處理的頁面有一個跨越其寬度的div。它的高度必須根據瀏覽器窗口調整大小。下面是我有這麼遠：使用css/html調整div的大小，但有一個catch

#vid_window{ position:absolute; float:left; background-color:#000; width:100%; height:57%; margin-left:auto; margin-right:auto; overflow:hidden; }

在頁面底部有一個「菜單」在上面div來扮演影片的分類，以及視頻，當然，將有調整div的高度。每個客戶端div都是絕對定位的。這不是一個問題：

#vid{width:100%;height:100%:}

由於它將填補#vid_window

這裏的問題：當瀏覽器頁面調整大小，它並不需要很長時間的「菜單」開始重疊VID窗口。我知道我可以減少百分比，但是，我並不是每個客戶端的都可能是。他們希望大部分頁面能夠顯示視頻，但他們當然不希望菜單重疊窗口或視頻。

下面是問題：有沒有辦法讓vid_window和vid根據瀏覽器窗口以指數方式調整大小，例如，如果窗口完全展開，vid_window爲57％，但如果它是一半尺寸， vid_window會比如說30％？

這裏到頁面的鏈接，如果你想：

page

來源

2012-03-29 Adam

從你所描述的東西，這聽起來像你會更好絕對定位菜單的底部，並在vid_window上使用相對位置。使用一些JavaScript可以正確調整它的大小，並且它可以解決您的重疊問題。如果你可以使用它，你可以使用jQuery快速完成它。

來源

2012-03-29 18:50:20

就像詹姆斯說我能想到的，你要做到這一點最好的辦法是設置一個類的股利vid_window在類設置的高度％，並檢查顯示窗口大小來確定你的最佳設置。此外，我可能會設置最小高度，以便頁面不會低於該高度，並向後兼容Modernizr。 http://www.modernizr.com/

------ 編輯 ------

這頁眉和頁腳將永遠關閉頁面。減少你有被設置在頁眉和頁腳，以百分比的高度，使他們與身體的高度

html,body { height:99%; min-height: 100%; } 
header { height:22%; min-height: 100px; } 
#content { height: 56%; min-height: 200px; } 
footer { height:21%; min-height: 100px; }

的最小高度值可以是任何你想擴展問題的一種方法是適當的爲你想去的最小高度。其餘的百分比高度應自動縮放頁眉頁腳，從而縮放您的內容。但是，這會強制頁腳在某一點上離開頁面（當滿足所有最小寬度並且瀏覽器窗口繼續縮小時）。我認爲這將是可取的，並應該滿足您的客戶需求。如果沒有，那麼你將要進入一個非常複雜的JavaScript並不總是會做數學題恰到好處，因爲每個瀏覽器如何處理填充和高度計算。最重要的是，如果他們禁用JavaScript，那麼它永遠不會工作。

來源

2012-03-29 18:58:06 CBRRacer

哦，是的，客戶端還希望vid窗口的頂部也被絕對定位，以便在瀏覽器調整大小時，vid窗口的底部向上摺疊。一個想法：有沒有一種方法可以創建一個算法來調整vid窗口與瀏覽器高度的關係？還是我要去兔子洞，在這裏？哦，這也是一個WordPress站點... – Adam 2012-03-29 19:02:41

你不應該絕對定位元素讓它從底部崩潰它應該默認做到這一點，但是如果你想讓底部留在同樣的位置，那麼絕對定位可能是必要的我不熟悉wordpress或PHP，但我的建議是，如果客戶不介意在那裏放置幾個javascript或jQuery文件，並檢查窗口大小以創建一個算法，該算法將調整到57％的顯示區域。最後當你做一個jQuery $（窗口）.height（）確保setTimeout，以便它不會觸發每個像素。 – CBRRacer 2012-03-29 19:15:10

至於自下而上的崩潰，我明白了。問題是，當窗口展開時，頂部和底部佔頁面的43％，其餘57％爲vid窗口。但是，當窗口調整大小時，頂部和底部佔用的百分比上升（因爲它們是固定高度），但視頻窗口按比例繼續縮小57％，因此重疊。所以，這個：如果頂部和底部佔用瀏覽器窗口的60％，是否有辦法確保vid窗口只佔用40％？然後70/30，80/20等 – Adam 2012-03-29 19:32:41

使用css/html調整div的大小，但有一個catch

回答

相關問題