I'm trying to create a single page website, with multiple divs that are full screen, but I'm not being able to turn them full screen.
I'm Already using bootstrap to make the website responsive, and it's my first time doing that.
What I want to do is set a background video, then when I scroll down, the divs fitting the entire viewport
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="imagens/logo_icone.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Museu do Barro Preto</title>
</head>
<body>
<div class="container-fluid">
<!--Video -->
<div class="row">
<div class="col-xs-12">
<video class="video_bg" autoplay muted loop>
<source src="video/prom.mp4" type="video/mp4">
A extensão do ficheiro não é suportada pelo seu browser
</video>
</div>
</div>
<!--/Video -->
<!--Barra de Navegação-->
<div class="row">
<header class="col-md-12">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Quem Somos</li>
<li>Onde Estamos</li>
<li>Educação</li>
<li>Video</li>
<li>Exposições</li>
</ul>
</div>
</div>
</nav>
</header>
</div>
<!--/Barra de Navegação-->
<div class="row pag1">
<article class="col-md-8">
<section>
<h1>Quem Somos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
<aside class="col-md-4">
<img src="http://www.dueceira.pt/trilhos/imgs/barro_preto_vnp2.jpg" alt="Peças Barro Preto">
</aside>
</div>
<div class="row">
<article>
<aside class="col-md-4">
<div id="mapa">
</div>
</aside>
<section class="col-md-8">
<h1>Onde Estamos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
</div>
<div class="row">
<div id="ilustracao">
<h1>SLIDESHOW DAS ILUSTRAÇÕES</h1>
</div>
</div>
<div id="video">
<div id="documentario">
<h1>Documentario</h1>
<video class="documentario" controls>
<source src="video/prom.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
html,body {
height:100%;
margin:0;
}
html>body .pag1 {
height:auto;
}
.video_bg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
.borders {
border: 1px solid black;
}
.documentario {
width: 500px;
height: 500px;
}
.pag1 {
width: 100%;
height: 100%;
margin-top: 100%;
background-color: #fff;
overflow: hidden;
position: relative;
}
.pag1 img {
width: 400px;
height: 400px;
}
Try giving your div's a vh style. Such as
div {max-height:100vh;} // this will give your div a max height of 100 vertical height which is set to full screen size.
http://www.w3schools.com/cssref/css_units.asp
What you want is the vh unit, coupled with a fallback for browsers that don't support it. Unless it's a very big project (those scroll-y sites usually aren't) I'd ditch Bootstrap. It's pretty badly made, actually.
Last site we did that had to behave like that, we put each full-screen element in a li, sized the li using 100vh, falling back to regular px units set by javascript to match screen size, falling back to a set of common screen resolutions through conditional comments.
Sadly, using 100% created a lot of headaches with sizing child elements.
This is elaborate to set up, but if you do this once it will save you a lot of work later. It's also pretty much the only solid way to do this accessibly. (We test all our work through a group of users with assistive technology.)
So In essence:
<ol>
<li>
'Page' content here.
</li>
<li>
'Page'content here.
</li>
</ol>
ol {
display: block;
position: relative;
width: 100%; /* Caused no issues and is better supported */
height: auto;
float: left;
}
li {
display: block;
position: relative;
width: 100%;
height: 100vh;
float: left;
}
Look at Modernizr if you haven't already:
https://modernizr.com/
Also look at the various Javascript solutions for serving up compatible video formats, or you may find yourself showing a full-screen blank screen.
Oh, and insert obligatory warning here about video aspect ratio's not matching all screen aspect ratio's. ;-)
Related
I'm trying to understand how to structure divs/containers using the bootstrap grid system in order to get a proper responsive sidenav. I want my site to have a fixed sidenav and maybe eventually make it a pop-out sidenav when I get around to learning jquery. This is my HTML currently & the issue I am having currrently is I need to figure out a way to make it fixed, responsive and turn into a horizontal "hamburger" menu on ipad and mobile devices.
<div class="container-fluid">
<div class="navbar fixed-top">
<div class="row">
<div class="col-md-3 sidebar">
Sidebar Content
</div>
</div>
</div>
<div class="col-md-9 content">
Main Content
</div>
</div>
first thing I did was put everything in a container then I enclosed the nav into the navbar class which I don't know if that's the proper way to do it.
Also here is some CSS if you want to replicate what I have so far.
html, body, .container-fluid, .row {
height: 100%;
}
.sidebar {
background-color: #CCCCCC;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: #CCCCCC;
}
}
#media (min-width: 992px){
.content{
margin-left: 25%;
}
}
.row {
padding-top: 4rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-3 sidebar">
<h3>Sidebar</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="col-9 content">
<h3>Content</h3>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
</div>
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
So I am just starting to learn some basic CSS and now I have come across some behavior I don't understand. I have a <div> inside an <article> and the <div>s height is set to 100%. Now if all the parents parents of the <div> have their height specified then the height is equal to the parents height, however when it is not the case then <div>s height is smaller.
Here is a simple example when not all heights are specified:
html {
height: 100%;
}
article {
background-color: red;
height: 100%;
}
#side-nav {
background-color: blue;
float: left;
min-width: 10%;
height: 100%;
padding: auto;
margin: 0;
}
#main-content {
margin-left: 10%;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<article id="article">
<div id="side-nav">
<ul>
<li><a class="art-link">bullet</a></li>
<li><a class="art-link">point</a></li>
<li><a class="art-link">list</a></li>
</ul>
</div>
<div id="main-content">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<h3>
title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</div>
</article>
</body>
</html>
note that the <div>(colored in blue) is smaller than the direct parent <article>(colored in red).
So now my question is if there is a reason for this behavior and if there is some workaround to avoid specifying all heights?
You don't specify a height for your <body>, as such the rest of the height is stuck trying to figure out what it's 100% of.
Please set body{height: 100%}, will set the height of both blue and red to 100%, as shown in the below working snippet, hope it helps :)
html, body {
height: 100%;
}
article {
background-color: red;
height: 100%;
}
#side-nav {
background-color: blue;
float: left;
min-width: 10%;
height: 100%;
padding: auto;
margin: 0;
}
#main-content {
margin-left: 10%;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<article id="article">
<div id="side-nav">
<ul>
<li><a class="art-link">bullet</a></li>
<li><a class="art-link">point</a></li>
<li><a class="art-link">list</a></li>
</ul>
</div>
<div id="main-content">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</div>
</article>
</body>
</html>
Instead of floating the side-nav element to the left, you need to use flex.
Then you don't need to specify height on every element, as requested.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
main {
height: 98%;
display: flex;
flex-direction: row;
flex: 1 1 auto; /* grow shrink amount */
}
article {
background-color: #ffeeee;
flex-direction: column;
flex: 1 1 auto;
padding: 0.5em;
}
#side-nav {
background-color: #eeeeff;
flex-direction: column;
flex: 1 1 auto;
min-width: 11%;
padding: auto;
margin: 0;
}
#side-nav ul {
list-style-type: none;
margin-left: -2.5em;
}
#side-nav li a {
display: block;
white-space: nowrap;
padding: 0.25em;
}
#side-nav li a:hover {
display: block;
background-color: #0000ff;
color: #fff;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<main>
<div id="side-nav">
<ul>
<li><a class="art-link">nav</a></li>
<li><a class="art-link">list</a></li>
<li><a class="art-link">and</a></li>
<li><a class="art-link">some</a></li>
<li><a class="art-link">more</a></li>
<li><a class="art-link">items</a></li>
</ul>
</div>
<article id="article">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<h3>
title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</article>
</main>
</body>
</html>
I just have a header div into this div there is a navbar and after that there is some content i just gave that header div a background color but that background doesn't cover the hole screen width i just wanna that background cover the hole screen width but there is white space in the left,top and right
and here is the html code :
<!--Start header section-->
<div class="header">
<div class="container">
<div class="top-nav">
<h1>Apptastico</h1>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<img src="photos/iPhone.jpg" alt="">
<div class="web-design">
<h1>We design iOS apps</h1>
<h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4>
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim.
Phasellus molestie tempor. Suspendisse dictum feugiat.
</p>
<input type="submit" value="Request qoute">
</div>
</div>
</div>
</div>
<!--End header section-->
and here is css code
.header{
background-color: #4b5a65;
height: 505px;
overflow: hidden;
padding-top: 10px;
}
and that's the result which appear in the browser screen:
apply
body{
margin:auto;
}
See snippet below
.header{
background-color: #4b5a65;
height: 505px;
overflow: hidden;
padding-top: 10px;
}
body{
margin:auto;
}
<!--Start header section-->
<div class="header">
<div class="container">
<div class="top-nav">
<h1>Apptastico</h1>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<img src="photos/iPhone.jpg" alt="">
<div class="web-design">
<h1>We design iOS apps</h1>
<h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4>
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu
tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim.
Phasellus molestie tempor. Suspendisse dictum feugiat.
</p>
<input type="submit" value="Request qoute">
</div>
</div>
</div>
</div>
<!--End header section-->
Your background is not taking entire screen. You should mention background to take entire width.
background-size: cover;
<img src="photos/iPhone.jpg" alt="" />
<input type="submit" value="Request qoute" />
Usually when I put an image or input tag on the page, it comes with those slashes at the end. This may or may not make a difference.
Same with the alternative text for that image. Try putting any random word in there.
I have a page with an image that takes the full height of the browser window, a column with text on the right side and a footer.
With full screen size the footer sticks at the bottom but it doesn't any more when the screen size is reduced as shown on the picture below.
How could I make the footer stick at the bottom in this configuration, and as a bonus, maybe how could the footer not hide a part of the text on the right side column when using large screens?
JSFiddle:https://jsfiddle.net/bb61c412/273/
And corresponding code:
.navbar {
background-color: #FF0000;
opacity:0.7;
border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
html, body {
height: 100%;
}
body {
margin: 0;
padding-top: 50px;
}
.fill {
min-height: 100%;
height: 100%;
}
#picture{
height: 100%;
background-image: url("http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position: bottom center;
}
#right-column{
overflow-y : scroll;
background-color:#E8E8E8 ;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 30px;
background-color: #FF0000;
opacity:0.7;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
</div>
</div>
</div>
<div class="container fill">
<div class="col-sm-8" id="picture"></div>
<div class="col-sm-4" id="right-column">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie augue ac aliquet gravida. Vestibulum molestie euismod posuere. Nam posuere nulla sed nisl cursus fermentum. Aenean lobortis libero sodales purus fringilla placerat. Duis commodo ornare venenatis. Cras euismod arcu vel vehicula elementum. Vivamus vestibulum a lorem vitae posuere. Pellentesque faucibus vehicula auctor. In aliquam viverra fermentum. Aliquam dapibus nibh et magna laoreet, dignissim feugiat turpis eleifend. Aliquam porta fringilla elementum. Integer ut pellentesque ipsum. Nunc et purus vitae dui placerat pellentesque. Phasellus egestas diam ut eleifend lobortis. Nulla ultricies pulvinar ante et elementum.
<p>
</div>
</div>
<footer id="footer"></footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Please find the solution in the below link
https://jsfiddle.net/wwut6apr/1/ position:fixed
You have to add position: fixed instead of absolute for the footer.
For you to read the bottom text on the right side bar, add a padding bottom of 30px to your right-column.
Thanks
You need to wrap the content above your footer, and add a push div to make the footer stick to bottom.
Modified fiddle
It is explained here : http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
The problem should be able to be seen live at this link (on every page, as the main content of the page is contained by my "content" div): http://tucsonbagley.com/index.html
The "content" class (a container div) has a much larger margin on the left than on the right and, after going over my CSS ad nauseum, I just cannot figure out why. I've broken something for sure (it was working not long ago!), but I just can't figure out what.
If I remove my id Navbar or id Header divs, the Content div will default back to the left... yeah, at this point I'm lost.
The CSS in question:
.content{
display:inline-block;
margin:0 auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
Example HTML:
<body>
<div class="header">
<p>Tucson Bagley</p>
</div>
<div id="socialmedia">
<img src="images/Twitter_logo_blue.png"/>
<img src="images/linkedin.png"/>
<img src="images/facebook.png"/>
</div>
<div id="header">
<small>BagelHero#gmail.com</small>
</div>
<div id="navbar">
<ul>
<li><span>Gallery</span></li>
<li><span>Resume/CV</span></li>
<li><span>Contact me</span></li>
</ul>
</div>
<div class="content">
<div class="thumbleft"><h2>This is some content.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non varius metus. Pellentesque eu nunc tortor. Aliquam id lectus orci. Sed id consectetur eros. Curabitur semper nisl nibh, rhoncus lacinia nibh volutpat at. Pellentesque sollicitudin vitae ipsum ut dictum. Proin ac risus ac nisi interdum hendrerit. Pellentesque sodales mauris ac eleifend vehicula. Nulla convallis aliquet urna varius auctor. Donec eget ipsum ut mauris consequat auctor eget sit amet odio. Nullam sed lorem erat. Praesent consequat porttitor magna, sit amet feugiat odio tincidunt ut. Fusce congue eros vel quam condimentum, vel consectetur quam imperdiet. </p>
</div>
</br>
<div id="copyright">
<p>Copyright 2012-2014 | Tucson Bagley</p>
</div>
</body>
Some help would be appreciated. Thanks in advance!
Add a <div style="clear:both"></div> before .content div and apply display:block to .content instead of display:inline-block and that's it
change the css of your .content to look like this
.content{
position: absolute;
left:0px;
right:0px;
display:inline-block;
margin:10px auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
the magic is the left:0px combined with right:0px and margin:10px auto which will only work in absolute mode.
Edit - updated css as per comments.