如何固定流體佈局的高度？

在RWD網站設計頁面上，我爲每個正在使用的盒子設置了918px的高度，如何設置相同的高度？如何固定流體佈局的高度？

如果我將高度設置爲自動或100％，它不起作用，如果我將高度固定爲918px，則適用於桌面，但不適用於移動媒體。

.box{ 
    background-color:#0c71b8; 
    height:100%; 
    min-height:918px; 
    }

盒是960像素的X 918px大小，並在該框中我有圖片和文字內容與背景的顏色吧。那麼我如何修復百分比的高度呢？

來源

2015-01-13 Sharath-designer

你可能使用'vh'單元代替。 http://stackoverflow.com/a/16837667/1317805 –

你能告訴我們更多的代碼（標記）或做一個演示（如小提琴）？ –

@Dura這裏是jsfiddle：http://jsfiddle.net/59oex2ux/ –

.box的所有父元素需要有100％的高度，那麼它應該工作。

來源

2015-01-13 10:25:35 mahatmanich

試過了，雖然沒有工作。 –

你的html ist無效！ – mahatmanich

請嘗試以下兩種解決方案。

jQuery - 動態查找窗口高度並在html元素上應用相同的高度。

function handleResize() { 
    var hgt = $(window).height(); 
    $('.box').css({'height':hgt+'px'}); // HTML element names 
} 

$(function(){ 
    handleResize(); 

    $(window).resize(function(){ 
    handleResize(); 
    }); 
});

CSS - 做絕對位置，使頂部&底值爲零。

.box{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

來源

2015-01-13 10:48:46 shanidkv

那麼我在Dreamweaver中使用流體佈局，所以我想，我需要控制與CSS本身的高度？ –

這取決於你的HTML骨架，你可以選擇以上任何選項。大多數情況下，jQuery選項將套件。 – shanidkv

您需要包裝每箱與父母div與所需的高度，比如918px，然後框的高度設置爲100%。

編輯：

以前的演示是不正確的。您還應該將overflow:auto添加到父div。

見new demo

來源

2015-01-13 10:59:59

那麼，這又適用於桌面佈局，但不適用於移動佈局。 918px也應該以移動/標籤佈局的百分比形式進行修復。 –

@Sharath-設計師，你是對的，我錯過了一點。請檢查更新的演示。 –

溢出：自動隱藏框，我看不到它。 –

如何固定流體佈局的高度？

回答

相關問題