Question

我希望我的持有人不要与我的导航栏重叠，我可以设置持有人的保证金顶部与我的导航栏完全一样，而不是输入数字吗？

这是html，

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

感谢。

Answer 1

尝试使用此

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 2

<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 3

您可以使用JQuery执行此操作，只需计算导航栏的height，该高度将为margin top的{{1}}：

holder

$(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;
}

Answer 4

要将导航栏添加到持有者的顶部，请将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 5

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

y+height

然后将navbarHeight的值作为持有者边距

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

如何保持div与另一个div一样多？

5 个答案: