javascript - 根据其他元素的属性设置元素样式

Question

我有一个 position:fixed div 作为顶部菜单的容器。我想要下面的 div，它是其余内容的容器，正好放在固定的 div 之后，以避免内容被隐藏在顶部 div 下，同时也避免它们之间出现某种“空白”。

基本的解决方法是设置一个固定的 “margin-top” 值，但我想知道是否可以设置内容容器 “margin-top” 值使用 CSS 调整到固定顶部菜单 div 的高度，还是使用 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/

Answer 1

将 margin-top 设置为固定值通常是解决此问题的正确方法。

如果您不确定固定顶部菜单的高度或者它会根据内容动态变化，您可以使用 JavaScript/DOM 事件来动态调整边距值(例如，如果菜单在您调整大小时改变高度窗口，您可以观察 resize 事件并调整边距值)。

我已经更新了 JSFiddle，以展示如何利用 resize 事件并通过查询固定元素的 offsetHeight 来设置边距: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(但我认为即使这样也不能解决您在这里遇到的问题)。