HTML/CSS 'width: 100%' not filling entire space
Question
I'm trying to make the nav bar width 100%, so stretch across the screen. I'm doing this, but it's not working:
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300"); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans'; background-color: #F5F5F5; } div#header { width: 100%; height: 220px; background-color: lightgray; margin: 0 auto; margin-top: 0; } /* #222222 - top nav #F5F5F5 - sidebar background color #FFF - sidebar link hover background color #63B7E8 - sidebar nav link hover text color #D8D8D8 - sidebar nav text color */ /* Navigation */ /* Nav Title */ .nav { background-color: dimgray; width: 100%; height: 35px; }
<html> <head> <title>Dashboard</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div class="container"> <!-- Navigation --> <div class="nav"> <div class="nav-items"> </div> </div> </div> </body> </html>
This is what it's doing: https://gyazo.com/a8cbf7530ccfa46f01a603e1c7dcb465 Any idea what it's only stretching part way?
2 answers
solution1
3 2016-02-04 23:21:30
The container class is limited in bootstrap.css :
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
All child elements refer to this width as 100% .
Tip for the future: Get yourself comfortable with your browser's DOM inspection tools:
solution2
0 2016-02-05 00:17:02
As Marvin stated, the width is limited because of <div class="container"> being there.
So, you have the option to change your markup like this:
<div id="header">
</div>
<!-- Navigation -->
<div class="nav">
<div class="nav-items">
</div>
</div>
To have width: 100% for your <div class="nav-items"> .
BUT
But if you are after something similar in which the navigation background is extended in full width, but menu items still wrapped in container , you may do it like this:
#header{ height: 40px; } .nav-bg{ background-color: #7878EF; } .container{ width: 80%; margin: 0 auto; } .nav{ height: 20px; padding: 10px 0; } .nav .nav-items{ float: left; margin-right: 20px; color: white; }
<div id="header"></div> <div class="nav-bg"> <div class="container"> <div class="nav"> <div class="nav-items">Nav Item</div> <div class="nav-items">Nav Item</div> <div class="nav-items">Nav Item</div> </div> </div> </div> <div class="container"> This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. This is body content. </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.