设置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的高度以匹配剩余高度，无位置并计算

回答

相关问题