Wie grenze ich ein Div so viel wie ein anderes?

Question

Ich möchte, dass mein Halter sich nicht mit meiner Navbar überschneidet. Kann ich den Rand des Halters so einstellen, dass er genau so groß ist wie mein Navbar, ohne Zahlen einzugeben?

Hier ist der 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>

Dank.

Answer 1

versuchen, diese

zu verwenden

margin: 0 auto; 

und für hinaus können Sie diese

display: block; 
margin: 0 auto; 

merken es auf CSS setzen verwenden, so werden sie wie diese

#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

Um navbar nach oben des Halters hinzufügen 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; 
} 

Für die dynamisch die margin-top auf den Halter auf navbar bekommen können Sie diesen jquery Teil

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

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

DEMO

hinzufügen

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

Sie JavaScript benutzen Sie die höhe von navbar

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

und als den Wert des navbarHeight als Randhalter setzen

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

Answer 5

du mit JQuery tun können, die Sie gerade height von navbar berechnen und diese Höhe margin top von holder wird:

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