CSS如何設置div高度爲100％減去一些像素

我想設計一個網頁，這些日子有點困難。CSS如何設置div高度爲100％減去一些像素

我有三個主要的divs。第一個是標題，第二個是頁腳，第三個是主要內容。頁眉和頁腳必須固定在頁面的頂部和底部。瀏覽器窗口的大小不會改變它們的位置。第三個div必須在這些div之間的空白處。它可以調整大小以適應調整窗口大小的頁面。

主div的高度必須完全改變，因爲我想在該div中放置Google地圖，所以此div的高度很重要。

我嘗試了很多東西，但都沒有成功。將div的設置height設置爲100％（body和html的高度也是100％）並不是答案。使用一個表格（三行，兩行固定高度，一行高度可變，height="100%"）也有一些問題（在IE8中，當我聲明doctype時，第二行的div（height:100%）沒有再適合細胞！）。

現在我不知道要做這個工作。我能做什麼？

注意：我不喜歡使用CSS3，因爲與舊瀏覽器的兼容性對我來說很重要。

來源

2013-02-04 Ahmad

添加一些代碼，也許你會得到一些答案。 'margin-bottom：-99 px'或者類似的東西呢？ –

這裏有一個很好的答案，使用純粹的CSS3和谷歌地圖工作http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Craig

爲您的標題使用設定的高度，並使用sticky footer來保持您的頁腳爲設定高度並與底部對齊。之間的空間應該始終是正確的高度。

來源

2013-02-04 20:32:26 Lrdwhyt

你能解釋更多嗎？我認爲我之前做過這樣的事情，但沒有用。 – Ahmad

@ user1919959關於你需要什麼有點不清楚，但是如果鏈接上的佈局是你想要的，即頁眉和頁腳已經設置高度並且與頁面各自對齊，並且身體將改變高度取決於窗口的內容或大小，那麼這是我最好的建議。 – Lrdwhyt

好吧，我知道，但這種方法創建滾動條，這不是我的目標。我錯了嗎？ – Ahmad

您應該嘗試衆所周知的Clearfix hack來處理高度問題，因爲您需要「清除」父母元素以獲得所需的完整100％高度。

來源

2013-02-04 20:37:20 Ruffo

我不明白我怎麼能用它來解決我的問題？ – Ahmad

你可以嘗試這樣的事情。

HTML

<div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div>

CSS

#header { 
    height:50px; 
    width: 100%; 
    background: black; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
} 

#body { 
    height:100%; 
    width: 100%; 
    background: #CCC; 
    position: absolute; 
    z-index: 0; 
} 

#footer { 
    height: 50px; 
    width: 100%; 
    background: #0CF; 
    position: fixed; 
    bottom: 0; 
}

這裏是一個小提琴 - http://jsfiddle.net/6M59T/

來源

2013-02-04 20:39:50 Swordfish0321

謝謝，但是這段代碼爲頁面創建了一個滾動條。我想要一些沒有任何滾動條的頁面。 – Ahmad

看到我更新的小提琴。 – Swordfish0321

你太近了，但是，但是......我的問題很混亂！我必須爲該地圖添加一些邊框和陰影。這不適合我！ – Ahmad

這是CSS的缺點之一。你只用這三個div就無法完成你想要的東西。您需要使用額外的div來抵消頁眉和頁腳的高度。這裏是如何解決這個問題：

<body style="height:100%; margin:0; padding:0;"> 
    <div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div> 
    <div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat"> 
     <div id="header-offset" style="height:50px;"></div> 
     <div id="footer-offset" style="height:70px;"></div> 
    </div> 
    <div id="footer" style="height:70px; background-color:lightblue;"></div> 
</body>

來源

2014-02-08 10:59:06 user3072466

CSS如何設置div高度爲100％減去一些像素

回答

相關問題