根据其他元素的属性来设置元素

我有一个position：fixed div，用作顶级菜单的容器。我希望将下面的div（其余内容的容器）放置在固定div后面，以避免内容隐藏在顶部div下，但也避免了它们之间的某种“空白区域”。根据其他元素的属性来设置元素

基本的解决办法，这是设置固定“边距”价值，但我想知道如果有可能的内容容器设置“边距”值固定顶部菜单div的高度使用CSS，还是最好用JavaScript来做？

这里的基本布局例如：

<div id="divTopFixed" style="width: 100%; position: fixed; top: 0px;">Some DIVs<br>That create variable height</div> 
<div style="margin-top: 40px; width:100%;">CONTENTS<br>...</div>

而且一个的jsfiddle：http://jsfiddle.net/zzcbajtz/

来源

2015-08-30 Dillinger

请包含您拥有的代码示例，并明确您想要实现的内容。目前这个问题还不清楚。 –

从你的问题我明白，div的（固定位置）高度不是永久的吗？ –

编辑我的帖子，包括更好的代码。不需要downvote它..它只是一个固定的容器格顶部变高 – Dillinger

设置margin-top为固定值，通常是去了解这个正确的方式。

如果您不确定固定顶部菜单的高度，或者它基于内容动态更改，则可以使用JavaScript/DOM事件动态调整边距值（例如，如果在调整大小时菜单更改高度该窗口，您可以观察resize事件并调整边距值）。

我已经更新了的jsfiddle到显示如何打入resize事件的示例和通过查询固定元件的offsetHeight设置margin：http://jsfiddle.net/zzcbajtz/2/

window.addEventListener('resize', (function resize(){ 
    document.getElementById('the_div').style.marginTop = 
    document.getElementById('divTopFixed').offsetHeight + 'px'; 
    return resize; 
})());

此代码的火灾时，该文件是加载，然后再次调整窗口的大小。

不幸的是，CSS无法像这样为你计算复杂的布局。有some better support for layouts coming in the future（但我认为即使这并不能解决你在这里遇到的问题）。

来源

2015-08-30 13:06:38 thomasfuchs

谢谢。我编辑了我的问题并添加了一个JSFiddle。所以，或者我以静态的方式与margin-top保持一致，或者使用JavaScript来获得动态的方式？ – Dillinger

JavaScript。我用一个简单的例子更新了你的JSFiddle。 http://jsfiddle.net/zzcbajtz/2/ – thomasfuchs

这是在IE上工作，但不是在Firefox上。 – Dillinger

根据其他元素的属性来设置元素

回答

相关问题