2017-10-25 10 views
0

たとえば、私は(Stackoverflowのもののような)私のページの上に張り付くナビゲーションバーを持っています。要素の高さ(または他のプロパティ)を取得し、同じ値を他の要素のプロパティと共有する方法はCSSにありますか?

したがって、ボディのパディングトップは、ナビゲーションバーが正確な高さに設定する必要があります。

しかし、このナビゲーションバーは高さが時々刻々と変化するため、70pxのような絶対値を使用してボディのパディングトップ値に割り当てることはできません。

私が探しているのは、このパディングトップが常に同じ値であることを確認するためのCSS純粋な方法です。

ナビゲーションバーがどのような高さになるかわからないので、var()も使用できません。

ありがとうございました。

+0

したいレイアウトを達成するための他の方法があるかもしれません。コードを投稿する必要があります。 –

答えて

0

あなたはJavaScriptではなくcssを使用して行うことができますが、とにかく@Michael Bが言ったように他の方法があるかもしれません。あなたが行うことができます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>

関連する問題