I am having an issue with my CSS at the moment and I can't seem to figure out how to fix the issue, I tried researching this problem but I couldn't really put into words how I would describe my situation.
Basically I have set the body to 100% height so that it acts as the parent for any child attribute that may set. the main goal that I am trying to achieve is to have the background image of my div to fill the rest of the page without extending it and creating an scroll overflow. However instead its overflowing and extending the body height and creating an overflow, which you can see in my screenshot below:
my html code is as follows
<body>
<nav class="navbar navbar-default">
<div class="container center-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Videos</li>
</ul>
</div>
</div>
</nav>
<div class="main-body">
<div class="main-wrapper">
</div>
</div>
My CSS
html{
height: 100%;
min-height: 100% !important;
}
body{
height: 100%;
min-height: 100% !important;
margin: 0;
}
.navbar.navbar-default{
margin-bottom: 0px;
border-radius: 0px;
}
.main-body{
height: 100%;
}
.main-wrapper{
height: 100%;
background: url("../images/test.jpg");
background-size:cover;
}
You've made .main-wrapper 100% the height of its parent. If body is 1000px, .main-wrapper will be as well. Since you also have another item in the body, it's pushing your main wrapper down.
Use height: calc(100% - [the height of the nav])
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
So I'm in the process of making a very simple landing page using just html and css with bootstrap, and I've been trying to have a background image that covers 100% of the available browser window, and I've tried wrapping it in a class="wrapper" tag and also applying "height:100%" to many different elements but the image just does not extend beyond the last html element in the body.
Edit: spelling
The main markup:
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
PURFFECT MATCH
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="centering">
<h1>Purrfect Match</h1>
<h3>Matching felines in need to human caretakers</h3>
<hr>
<button class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
</div>
<script src="https:code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
All the CSS I've applied:
.centering {
text-align: center;
padding-top: 25%;
height: 100%;
}
body {
padding-top: 140px;
height:100%;
}
.wrapper {
height: 100%;
width: 100%;
background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
}
h1 {
height: 100%;
}
what the webpage looks like
In order for height:100% to work, it needs to be in a container with an explicitly defined height (eg: 100px). This can be a distant ancestor if the ancestors between also have percentage heights.
If you want it to be 100% of the viewport, try 100vh instead.
Why not just add it to the body? Like this:
body {
padding-top: 140px;
height:100%;
background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
}
Here's an example:
.centering {
text-align: center;
padding-top: 25%;
height: 100%;
}
body {
padding-top: 140px;
height:100%;
background: url(https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
}
.wrapper {
height: 100%;
width: 100%;
}
h1 {
height: 100%;
}
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
PURFFECT MATCH
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="centering">
<h1>Purrfect Match</h1>
<h3>Matching felines in need to human caretakers</h3>
<hr>
<button class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
</div>
HTML:
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron jumbotron-fluid vertical-center">
<div class="container">
<h1 class="display-3">TITLE</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>Description text</p>
<p class="lead">
<a class="btn btn-primary btn-lg btn-jumbotron" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
</div> <!-- /container -->
CSS:
.navbar{
padding: 7px 0;
margin-bottom: 0;
}
.jumbotron {
background-image: url(http://cdn.wallpapersafari.com/97/93/UE7u4i.jpg);
background-size: cover;
color: white;
margin: 0;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.btn-jumbotron{
background-color: black;
border-color: white;
}
I'm trying to have a jumbotron have full height of the browser's window, but without the height of the static navbar. I did get it to size of full viewport by using height: min-height:100vh amnd center it, but as you can see from the jsfiddle example I have a scrollbar present because of the navbar's height - 64px.
How can I remove that?
https://jsfiddle.net/iDaniel19/12qxmkjt/
Use calc
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
min-height: calc(100% - 64px); /* */
min-height: calc(100vh - 64px); /* */
display: flex;
align-items: center;
}
Add to .navbar position: absolute; top: 0; width: 100%; and padding-top:64px; to .jumbotron
was hoping for a little help. My Bootstrap navigation is running off the right hand side of the screen? There was a white space on both the right and left sides which I fixed, but now the 'help' link is running off. Any suggestions?
index.html
<div id="header">
<!--CSS deals with header image-->
</div>
<h1>Hands on Sports & Holistic Therapy</h1>
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home<span class="sr-only">(current)
</span></a></li>
<li>Treatments</li>
<li>Bookings</li>
<li>Shop</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In</li>
<li>Basket<span class="badge">5</span></li>
<li></li>
<li>Contact</li>
<li>Help</li>
</ul>
</div>
</div>
</nav>
</head>
<body>
cssgeneric.css
#header{
background:url('banner5.jpg') no-repeat top center;
background-size: 95%;
width: 100%;
height: 200px;
margin-top: 50px;
}
#navbar{
background-color: #ccb69b;
margin-left:-20px;
margin-right:-15px;
}`
I can see in the CSS a rule, and I think is possible that is the problem.
#media (min-width: 768px)
navbar.less:380
.navbar-right {
float: right!important;
margin-right: -15px;
}
The margin-right: -15px; is the possible problem. This rule is in navbar.less in bootstrap folder.
In your CSSGeneric.css I change and add new rules.
/*line 76*/
#navbar{
background-color: #ccb69b;
margin-left:-20px;
margin-right:-15px;
}
ul.nav.navbar-nav.navbar-right {
margin-right: 0px;
}
I add the ul.nav.navbar-nav.navbar-right to fix the problem with navbar.less.
I hope that help.
have a good day.
I'm fairly new to bootstrap and having a hard time trying to get my jumbotron background image to scale properly without showing the white background. I'm using Bootstrap Fixed Nav at the top of the page, Jumbotron (bg image) in the middle, and Sticky Footer. When I test in google chrome to see if the layout is correct, it seems that the image doesn't stretch down to the top of the footer, which shows the white background. How can I get the background image to scale properly for all devices?
HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="text-center">Front-End Web Developer</h1>
<p class="text-center">I'm Jason Murray, Front-End Web Developer who loves to write clean codes and build simplistic web designs.</p>
<p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">Recent Work</a></p>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-center">Copyright © 2016 Jason Murray Web Design. All Rights Reserved</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
There is a margin bottom to this jumbotron class, so remove margin:
.jumbotron {
margin-bottom: 0;
}
Here is the fiddle: fiddle link
The image is not stretched down to the top of the footer is because of jumbotron's predefined property margin-bottom: 30px;.
In your CSS code do the following changes:
nav + .jumbotron {
margin-bottom: 0;
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
If you add margin-bottom: 0; in your .jumbotron selector it won't work due to specificity. Hence I've increased the specificity by adding Adjacent Sibling Selector, nav + .jumbotron to override your CSS properties with the predefined bootstrap's .jumbroton CSS properties.
currently not knowing how to continue. I got an absolute positioned div element at the bottom of the page. I want to place a logo which is centered and also left and right from the logo i want to place the navigation ( i am working with bootstrap ). Here is an image from my idea so you can get a better view:
Here is my code of the position absolute div at the bottom. I kinda lost it pretty fast and appreciate every help i can get!
<div id="footmenu">
<div class="container navresize">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navleft">
<li>Home</li>
<li>Portfolio</li>
<li>Über uns</li>
<li></li>
<img src="images/logo.png" />
</ul>
</div>
</div>
</nav>
</div>
</div>
CSS:
#footmenu {
background:grey;
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
}
( I deleted the rest of the css because i was pretty sure that it was wrong )
Again thanks for the help and i appreciate your time !
Edit: Will update the jsfiddle now. Here is a result i found which shows perfectly what i want to get: http://www.templatemonster.com/demo/39221.html
Here is the jsfiddle: http://jsfiddle.net/Su6VF/2/embedded/result/
You can try with inline-block display for the divs containing the list items and the logo and text-align:center to the wrapping div to position these in the center.
Check this FIDDLE
This might help you. Here is the styles used
.row{
text-align:center;
}
.col-md-4{
display:inline-block;
float:none;
width:auto;
}