如何保证 div 与另一个保证金一样多？

Question

我希望我的 holder 不与我的导航栏重叠，我可以将 holder 的 margin-top 设置为与我的导航栏完全一样多而不输入数字吗？

这是 html,

#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: grey;
  position: fixed;
  top: 0;
  width: 100%;
}
#holder {
  min-height: 100%;
  background-color: #F7F4EE;
  position: relative;
}

<div>
  <ul ID="navbar">
    <li><a class="active" href="home.html">Home</a>
    </li>
    <li><a href="news.html">News</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
  </ul>
</div>

<div id="holder">
  <header>""</header>
  <div id="body">""</div>
  <footer>""</footer>
</div>

谢谢。

Answer 1

要将导航栏置于支架顶部，请将 z-index 添加到导航栏

#navbar {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1;
}

对于将 margin-top 动态设置为持有人，您可以添加此 jquery 部分

var navBarHeight = $('#navbar').height();

$('#holder').css({
    paddingTop:navBarHeight,
})

DEMO

Answer 2

尝试使用这个

margin: 0 auto;

对于添加，您可以使用这个

display: block;
margin: 0 auto;

记得放上css这样就变成这样了

#navbar {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    margin: 0 auto;
}

#holder {
    min-height: 100%;
    background-color: #F7F4EE;
    position: relative;
    display: block;
    margin: 0 auto;
}

Answer 3

<style>
#navbar {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    width: 100%;
    display:inline-block;
    width:100%;
    z-index:999;
}
#navbar li {
    list-style:none;
    display:inline-block;
    margin-right:10px;
}
#holder {
    min-height: 100%;
    background-color: #F7F4EE;
    position: relative;
    padding-top:50px;
}
</style>

<div id="navbar">
  <ul>
    <li><a class="active" href="home.html">Home</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</div>
<div id="holder">
  <header>""</header>
  <div id="body">""</div>
  <footer>""</footer>
</div>

Answer 4

您可以使用JavaScript获取导航栏的高度

var navbarHeight = document.getElementById('navbar').offsetHeight;

然后将 navbarHeight 的值作为 holder margin

document.getElementById('holder').style.height = navbarHeight + "px";

Answer 5

您可以使用 JQuery 执行此操作，您只需计算导航栏的 height，该高度将是 holder 的 margin top:

$(document).ready(function(){
  var navbar = $('.navbar').height(); 
  console.log(navbar);
  $('#holder').css({
    marginTop: navbar
  })
})

.navbar {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: grey;
  position: fixed;
  top: 0;
  width: 100%;
}
.navbar ul {
  margin: 0;
}
.navbar li {
    list-style-type: none;
    display: inline;
}
#holder {
  min-height: 100%;
  background-color: #F7F4EE;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="navbar">
  <ul>
    <li><a class="active" href="home.html">Home</a>
    </li>
    <li><a href="news.html">News</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
  </ul>
</div>

<div id="holder">
  <header>""</header>
  <div id="body">""</div>
  <footer>""</footer>
</div>

如何保证 div 与另一个保证金一样多？

How do I margin a div as much as another?

html

css

margin

overlap