設置div的高度以匹配剩餘高度，無位置並計算

我的目標瀏覽器，如果Firefox 10.我有兩個師被另一個師包圍。第一個表示標題，第二個表示主體。周圍的div代表一個容器。 header div的高度是50px，我希望body div佔據剩餘的高度。我寫了這個示例代碼，我看到body股利正在採取容器的高度，我得到一個滾動條。設置div的高度以匹配剩餘高度，無位置並計算

body, html { 
    margin: 0px; 
    height: 100%; 
} 
.container-style { 
    height: 100%; 
} 
.header-style { 
    border: 1px solid black; 
    height: 50px; 
} 
.body-style { 
    border: 1px solid black; 
    height: 100%; 
}

<div id="container" class="container-style"> 
    <div id="header" class="header-style"> 
    </div> 
    <div id="body" class="body-style"> 
    </div> 
</div>

我然後用於計算CSS5方法和解決它。以下是代碼

.body-style { 
    border: 1px solid black; 
    height: calc(100% - 50px); 
}

但是，這不會在瀏覽器不支持css5。然後我使用CSS位置屬性來實現它。

.body-style { 
    border: 1px solid black; 
    position: absolute; 
    height: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    padding-top: 50px; 
    width: 100%; 
    top: 0px; 
    left: 0px; 
}

我不知道它是否適用於其他瀏覽器。但至少它會在Firefox 10上工作。

我想知道是否有任何解決方案不涉及使用CSS位置屬性和簡單的解決方案。

來源

2013-12-10 Krishna Chaitanya

使用margin-top替代padding-top – Igle

看起來很簡單。如果它起作用有什麼問題？你想讓內容隨內容動態擴展還是保持原樣並滾動？ – leigero

@leigero是啊，它工作正常。但我只是想知道是否有任何其他解決方案，而不使用'position：absolute' –

您需要添加負面的margin-top才能反擊您的padding-top。你padding-top當前等於50像素，但你的頭元素有1px寬的邊框，因此，因此你padding-top應該等於52px：

.body-style { 
    ... 
    padding-top: 52px; 
}

你margin-top將需要等於-52px：

.body-style { 
    ... 
    padding-top: 52px; 
    margin-top: -52px; 
}

你.body-style選擇現在這個樣子：

.body-style { 
    border: 1px solid black; 
    height: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    padding-top: 52px; 
    margin-top: -52px; 
    width: 100%; 
}

JSFiddle demo。

來源

2013-12-10 09:05:07

設置div的高度以匹配剩餘高度，無位置並計算

回答

相關問題