基于其他元素's属性设置元素样式

Style an element based on other element's attribute

本文关键字：元素 属性 设置 样式 其他 于其他      更新时间：2023-09-26

我有一个position:fixeddiv作为顶部菜单的容器。我希望下面的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/

将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不能为你计算像这样复杂的布局。将来会有一些更好的布局支持(但我认为即使这样也不能解决你在这里遇到的问题)。

相关文章：