CSS 中有没有办法获取元素的高度(或其他属性)并与其他元素的属性共享相同的值

例如，我有一个导航栏粘在我的页面顶部（就像Stackoverflow上的导航栏一样）。

因此，主体的填充顶部应设置为导航栏的确切高度。

但是，此导航栏的高度会不时变化，因此我不能依靠像 70px 这样的绝对值来分配给正文的填充顶部值。

所以，我正在寻找一种纯 CSS 的方式来确保这个填充顶部始终是相同的值。

我也不能使用 var（），因为我事先不知道导航栏最终会变成什么高度。

谢谢。

你可以

使用javascript而不是css来做到这一点，但无论如何，正如B所说@Michael，可能还有其他方法。

使用 JavaScript，您可以执行以下操作：

var nav = document.getElementById("navigationID");
console.log(nav.clientHeight); 
// nav.clientHeight will return integer value of your navigation height.

var nav = document.getElementById("navigationID");
var container = document.getElementById("container");
container.style.paddingTop = nav.clientHeight + "px";

#navigationID
{
  color:#000;
  height:70px;
  width:100%;
  border:4px solid green;
  display:block;
  position:absolute;
}
#container{
  border:1px solid red;
  display:block;
  width:100%;
  height:400px;
  position:relative;
}

<html>
<head>
</head>
<body>
<div id="navigationID"> navigation </div>
<div id="container">
    container
</div>
</body>
</html>

相关内容

最新更新

热门标签：