yamachan yamachan - 1 month ago 10
CSS Question

I'd like to display a header as 100% width on browser with Bootstrap

I'd like to display the black header as 100% of browser, but when I make the browser wide and narrow, the header is not showed as 100% width.
enter image description here
You can see it in this photo.
enter image description here
How should I change or add css code?
My site is here.

Sorry, I forgot to write my code. My code is following this.



$(document).ready(function(){
var $affix = $('*[data-spy="affix"]');
$affix.width($affix.parent().width());
});

html {
font-size: 62.5% !important; /* 10 px */
}

/*header {
position: absolute;
text-align: center;
top: 0px;
z-index: 1000;
color: #fff;
width: 100%;
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}*/

.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel .carousel-control {
visibility: hidden;
}
.carousel:hover .carousel-control {
visibility: visible;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-inner {
margin-bottom:50px;
}

/*.logo {
float: left;
text-align: left;
display: inline-block;
}*/

.transparent-header {
z-index: 22;
position: absolute;
width: 100%;
left: 0;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

#carousel-example-generic {
width: 100%;
height: 100%;
position: relative;
}

.nav::after,
.nav::before,
.navbar-header::after,
.navbar::after {
display: table-caption;
}

.nav.navbar-nav li,
.nav.navbar-nav li a {
display: inline-block;
}

#gnav {
font-size: 0.9em;
/*width: 100%;*/
}

#logo
img {
display: block;
margin: auto;
}

<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<meta name=”robots” content=”noindex,nofollow,noarchive,noodp,noydir”>
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
{% block additional_css %}{% endblock %}
{% block custom_css %}{% endblock %}
</head>
<body>

<div id="wrapper">

<!-- <div class="container" id="range">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:Yellow;">ExtraSmall</div>
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3" style="background-color:green;">Small</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" style="background-color:blue;">Midium</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-3" style="background-color:Red;">Large</div>
</div>
</div> -->

<!-- Header -->
<header id="header" class="header clearfix fixed transparent-header" >
<div class="container-fluid" id="header-inner">
<div class="row">

<!-- Global Navigation -->
<div id="gnav" class="" data-spy="affix" data-offset-top="94">
<nav class="navbar navbar-inverse" id="">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">商品紹介</a>
<!-- Dropdown -->
<ul class="dropdown-menu">
<li>
<a class="" href='#'>ジュース <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">オレンジ</a></li>
<li><a href="#">アップル</a></li>
<li><a href="#">グレープ</a></li>
</ul>
</li>
<li>
<a class="" href='#'>寿司 <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">マグロ</a></li>
<li><a href="#">サーモン</a></li>
<li><a href="#">エンガワ</a></li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->

<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">ご注文</a>
<ul class="dropdown-menu">
<li>
<a class="" href='#'>スマートフォン <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">iPhone</a></li>
<li><a href="#">Xperia</a></li>
<li><a href="#">Galaxy</a></li>
</ul>
</li>
<li>
<a class="" href='#'>野菜 <i class=""></i></a>
<ul class="sub-dropdown">
<li><a href="#">トマト</a></li>
<li><a href="#">レタス</a></li>
<li><a href="#">枝豆</a></li>
</ul>
</li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->

<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">お問い合わせ</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>自分用</a></li>
<li><a class="" href='#'>他人用</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- .dropdown -->

<li class="dropdown">
<a class="" data-toggle="dropdown" href="index.html">会社案内</a>
<ul class="dropdown-menu">
<li><a class="" href='#'>フォーム</a></li>
<li><a class="" href='#'>電話</a></li>
</ul> <!-- dropdown-menu -->
</li> <!-- dropdown -->

</ul> <!-- .nav .navbar-nav -->

</nav> <!-- .navbar .navbar-default -->
</div> <!-- #gnav .col-md-9 -->

<!-- Logo -->
<div id="logo" class="">
<a href="#">
<img src="http://vignette2.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/20120422044236" id="logo-img" class="img-responsive logo-img" height="50" width="50">
</a>
</div> <!-- #logo .col-sm-3 -->

</div> <!-- .row -->
</div> <!-- .container -->
</header> <!-- #header .clearfix -->


<section id="">
<article id="apple">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg" alt="First slide">
</div>
<div class="item">
<img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-2.jpg" alt="Second slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div>
<span>Bootstrap carousel</span>
</div>
</article>
</section>

<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>
<h1><span>I LOVE TOMATO!!!!</span></h1><br>



</div> <!-- #wrapper -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>




Answer

As i can see, you are setting width with jquery, so you need jquery on resize to fit again the full width:

$( window ).resize(function() {
    var $affix = $('*[data-spy="affix"]');
    $affix.width($affix.parent().width());
});

Change this line of code:

$(document).ready(function(){
    var $affix = $('*[data-spy="affix"]');
    $affix.width($affix.parent().width());
});

to:

$(document).ready(function(){
        var $affix = $('*[data-spy="affix"]');
        $affix.width($affix.parent().width());
        $( window ).resize(function() {
            var $affix = $('*[data-spy="affix"]');
            $affix.width($affix.parent().width());
        });
});
Comments