Question

我有一个位置：固定 div，用作顶级菜单的容器。我希望下面的div，它是其余内容的容器，完全放在固定的div之后，以避免内容被隐藏在顶部div下，但也避免某种＆＃34;空格＆＃34 ;他们之间。

基本的解决方法是设置一个固定的＆＃34; margin-top＆＃34; 值，但我想知道是否可以设置内容容器＆＃34; margin-top＆＃34; 使用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/ < / p>

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（但我认为即使这样也无法解决您在这里遇到的问题）。

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

1 个答案: