My code is as shown below:
xyz.scss
.menu-about {
display: none;
}
header {
display: none;
}
.container {
background-color: yellow;
width: 100%;
height: 100%;
}
#q-nav-about {
width: 100%;
height: 4rem;
position: fixed;
display: flex;
align-items: center;
top: 0;
background-color: white;
z-index: 3000;
.q-logo {
margin-left: 1rem;
width: 99px;
height: 50px;
}
ul {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.q-nav-about {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
ul li {
list-style: none;
}
.q-nav-work {
position: relative;
color: #898989;
font-size: 18px;
text-decoration: none;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
.q-nav-contact {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 8rem 0rem 2rem;
}
}
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 100% !important;
background-color: blue;
.row {
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
}
}
xyz.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.js" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<img class="mob-logo-about" src="../image/logo_logo.svg" alt="New york">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu-about">
<ul>
<a href="/template/about-us.html">
<li>About us</li>
</a>
<a href="#work">
<li>Products</li>
</a>
<a href="#contact-us">
<li>Contact</li>
</a>
</ul>
</div>
<div id="q-nav-about">
<img class="q-logo" src="../image/logo_logo.svg" alt="New york">
<ul>
<li><a class="q-nav-about " href="/template/xyz.html">xyz</a>
</li>
<li><a class="q-nav-work" href="#abx">abx</a>
</li>
<li><a class="q-nav-contact" href="#lll">lll</a>
</li>
</ul>
</div>
<div class="container r-contact-container">
<div class="row">
<div class="col-sm-8 no-padding">hdbdasjhdasdhjsda</div>
<div class="col-sm-4 no-padding">sdcdbcjdhhddahs</div>
</div>
</div>
</body>
</html>
My layout looks as shown below:
You need to add the below CSS:
html, body{
height:100%;
width:100%;
}
Then you can adjust the height of the r-contact-container.
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 86% !important;
background-color: blue;
}
This height can be adjusted, I have just used 86%.
JSFiddle Demo
You can use other unit of measure, you can try using:
height: 100vh.
"100vh" is 100% of height of window screen.
Related
I have a header in the beginning of my webpage with a background image covering 100% of the width and 100vh. I want to add a different section in my page for the story section which is one of my nav
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
font-family: 'Lato','sans-serif','arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.wrapper {
width: 100%;
height: 100vh;
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("img/truck.jpg");
background-size: cover;
background-position: center;
height: 100vh;
}
.flex-item {
padding-top: 15px;
}
.item1 {
padding-top: 0;
padding-left: 30px;
}
.logo {
height: 90px;
}
.main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav a {
color: white;
padding: 1rem;
text-decoration: none;
}
.main-nav a:hover {
color:orange;
}
.hero {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.hero a {
text-decoration: none;
color: white;
display: block;
margin: 10px;
}
.btn {
background-color: orange;
border-radius: 50px;
}
/*---------------------------------*/
/*Story Section*/
/*---------------------------------*/
section .flex2 {
display: flex;
flex-direction: column;
color: black;
height: 100vh;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Resources/css/styles.css">
</head>
<body class="wrapper">
<header class="flex">
<div class="flex-item item1">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
</div>
<nav class="flex-item main-nav">
<ul>
<li>Our Story</li>
<li>Locations</li>
<li>Menu</li>
<li>Order now</li>
</ul>
</nav>
<div class="hero">
<h2>Best Burgers <br> In DA City(D.C)</h2>
<a href="#" class="btn" btn-full>Order now!</a>
<a href="#" class="btn" btn-ghost>View Menu!</a>
</div>
</header>
<section class="flex-2">
<div class="flex-item-2">
<h2>Established in 2017 in D.M.V</h2>
<p class="story"> founded in 2017 by owner Med.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
</div>
</section>
</body>
</html>
elements. However I can not scroll to view the content in the story section consisting of an h2 element and paragraph tag inside a flex container.
html,
body {
font-family: "Lato", "sans-serif", "arial";
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
I think because your font color is white
I've been going around the web trying to find an answer to how to center my navbar but none of the solution worked.
The code below will show what I have so far with both HTML and CSS.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
This is how it looks like right now:
I have also noticed that in CSS, when I did "float: center;" it had no difference with when I did "float: left;". But when I did "float: right;" it would shift to the right.
ul {
margin: 0 auto;
text-align: center;
}
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin: 0 auto;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have removed the below css from your code
header #smcontent {
float: left;
}
and added margin: 0 auto; text-align: center; to the ul
Try absolute position with float none, left 50% and a left translate of 50% to center your nav bar perfectly.
CSS: add
header .newCenter {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
HTML: add
<nav class="newCenter">
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
Float only applies to left and right. I added display: grid and justify-content: center to your header. I removed float: left; in header #smcontent.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
display: grid; //or flex
justify-content: center;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline;
padding: 0 20px;
}
header nav {
margin: 10px auto 0;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin: 0 auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
To align text horizontally center use text-align:center. In your to align nav bar content center just add text-align:center to header nav
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
In below code snippet I have added some images for demonstration purpose.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-may-26-2015twitter-260nw-281505518.jpg">
</a>
<a href="https://facebook.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-april-27-2015-260nw-278925056.jpg">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
I'm having some trouble making a nav menu and its sub menu to display via the pseudo checkbox toggle. I looked at some guides and tried some, but I'm not getting the result I wanted -- the menus does not appear when toggle the checkbox on.
https://codepen.io/UnorthodoxThing/pen/paMBQB
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Natural Pasta</title>
<link rel="stylesheet" type="text/css" href="style-index.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
<body>
<div class="wrapper">
<!-- Top Menu-->
<img class="top-logo" src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="220px" height="220px">
<div class="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A">Menu</label>
<ul>
<li>Pastas To Go</li>
<li>Sauces To Go</li>
<li>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C" style="font-size:10pt;">Ready Meals...</label>
<ul>
<li>Arancinis</li>
<li style="font-size:10pt;">Garlic Bread</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Find Us</li>
</ul>
</div>
</div>
<div class="banner">
<!--
<img src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="300px" height="300px">
-->
</div>
<div class="body-content">
<div class="specials-title"><h3>- SPECIALISING IN -</h3></div>
<div class="specials-content">
<div class="specials-boxes"><div class="specials-text"><h3>Freshly Hand Made Pastas</h3></div><div class="specials-img"><img src="freshlyhandmadepastas-1.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Pasta Meals</h3></div><div class="specials-img"><img src="gourmetpastameals-3.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Traditional Home Made Sauces</h3></div><div class="specials-img"><img src="traditionalhomemadesauces.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Variety of Filled Pastas</h3></div><div class="specials-img"><img src="varietyoffilledpastas-1.jpeg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Home Made Soups</h3></div><div class="specials-img"><img src="homemadesoups-2.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Rolls</h3></div><div class="specials-img"><img src="gourmetroles-1.jpg"></div></div>
</div>
</div>
<div class="footer">
<!--<div class="grid">-->
<div class="upper-footer-container">
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Follow Us</h4>
<ul class="social-networks">
<li class="flex-items"><img src="fb-icon.png"></img></li>
<li class="flex-items"><img src="instagram-icon.png"></img></div></li>
</ul>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Opening Hours</h4> <br>
<ul class="contact-details">
<li>Monday: 9am-5:30pm</li>
<li>Tuesday: 9am-5:30pm</li>
<li>Wednesday: 9am-5:30pm</li>
<li>Thursday: 9am-9pm</li>
<li>Friday: 9am-5:30pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 10am-5pm</li>
</ul>
</div>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Contact Us</h4> <br>
<ul class="contact-details">
<li>Add.: 152 Bunnerong Rd, Eastgardens NSW 2036</li>
<li>No.: (02) 8347 1988</li>
<li>Email</li>
<br>
<li>Catering Available</li>
</ul>
</div>
</div>
<div class="lower-footer-container">NaturalPasta © 2018</div>
<!--/div>-->
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
}
.wrapper {
min-height: 100%;
width: 100%;
position: relative;
background: url("img/pasta-food-wallpaper-4.jpg") no-repeat;
background-size: 1350px 670px;
background-position: center;
background-attachment: fixed;
}
body {
height: 100%;
background: #ddd;
}
.nav {
height: 204px;
width: 100%;
margin: 0 auto; /* Centers navigation */
text-align: center;
text-transform: uppercase;
background: black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: 'Gloria Hallelujah', cursive;
color: #ee6f20;
font-weight: bold;
font-size: 13pt;
}
.nav ul li {
height: 41px;
width: 125px;
background: #000;
}
.nav .dropdown-menu ul, .dropdown-menu .readymeals ul {
background: #000;
}
.nav a {
text-decoration: none;
color: #ee6f20;
}
.dropdown-menu ul li, .dropdown-readymeals ul li {
display: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.dropdown-menu ul {
position: absolute;
display: none;
}
input[type=checkbox] {
display: none;
}
input#A:checked ~ .dropdown-menu ul li {
display: block;
max-height: 100%;
}
input#A-C[type=checkbox]:checked ~ .dropdown-readymeals ul li {
display: block;
}
/*tbc */
.dropdown-menu ul li {
font-size: 11pt;
background: #000;
}
.nav ul {
list-style: none;
display: inherit;
}
.nav ul li, .nav ul ul, .nav ul ul li, .nav label {
cursor: pointer;
}
.top-logo {
margin: auto 0;
position: absolute;
left: 42%;
margin-top: -15px;
}
.body-content {
background-color: #000;
}
.specials-content {
position: relative;
display: flex;
flex-wrap: wrap;
color: orange;
justify-content: center;
}
.specials-title h3 {
width: 100%;
display: block;
margin-top: 0px;
padding-top: 75px;
color: #ee6f20;
}
.specials-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 35px 75px;
padding: 50px 100px;
/*adjust margin height-width*/
}
.specials-text, .specials-img {
padding: 35px;
display: flex;
align-items: center;
}
.specials-text h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #ee6f20;
}
.specials-img img {
width: 300px;
height: 300px;
border-radius: 25px 5px 25px 5px;
}
h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #eee;
}
.footer {
bottom: 280px;
padding: 150px;
width: 100%;
text-align: center;
background: rgb(0,0,0);
color: white;
font-family: sans-serif;
display: flex;
flex-flow: wrap;
}
.upper-footer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
.footer-container-1 {
width: 250px;
display: block;
margin: 25px;
}
.social-networks {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-items a img {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 25px;
}
.contact-details {
list-style: none;
font-family: 'ubuntu', sans-serif;
}
.lower-footer-container {
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
}
Is it to do with the html? The CSS? What could be interfering from displaying the menu and its submenu? :/
Much appreciated for the long run.
(P.S. I have other source image used in here, though that should not conflict with what I'm trying to resolve.)
In your code the <ul> tag is the sibling of selector input#A
But you have written css code as if .dropdown-menu is the sibling of selector input#A. This is why your code at this particular point doesn't work.
You have to target <ul> when input#A is clicked. <ul> is the sibling of input#A.
Change the css code on line 81 as below
input#A:checked ~ ul li {
display: block;
max-height: 100%;
}
This code change will make your sub-menu visible when you click Menu as shown in below image.
i'm mentioning the fix only for this particular point. In your codepen i can see that you've made this same mistake in few other places. You have to fix it.
Hope this helps.
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto
I am trying to add a div between the header and footer. Both are flex boxes, however the div in between (which in the end needs to be a slider) does not get positioned well. I am trying to get the header on top and the slider to fill up the remaining space of the view height. Only on the scroll it should show the footer (and eventually other div's as well). Somehow I have the feeling flex box is not working correctly..
Basically the same effect as this website: ArsThanea.
Another problem that I have when opening the JSFiddle is that the header and footer do not take the complete width of the view box, although the div does. When running the html and css in the browser using Gulp / Jekyll it works and it takes up the complete width.
header {
height: 130px;
background: white;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
header .logo img {
height: 73px;
width: 146px;
padding-left: 60px;
}
header p {
text-transform: uppercase;
font-family: 'StratumNo1';
font-size: 14px;
margin: 0;
padding-left: 50px;
}
header .site-nav {
margin-left: auto;
}
header .site-nav ul {
list-style: none;
margin: 0;
}
header .site-nav ul li {
display: inline;
font-family: 'StratumNo1';
color: black;
margin: 10px;
text-transform: uppercase;
font-size: 14px;
}
header .site-nav ul li a {
text-decoration: none;
color: black;
}
header .site-nav ul li a:hover {
text-decoration: underline;
}
header .site-nav ul li a:first-child {
margin: 0px 10px 0 0;
}
header .search-form {
width: 300px;
height: 20px;
margin-left: 10px;
}
header .search-form .search-input {
width: 240px;
border-bottom: black 1px solid;
border-left: 0;
border-right: 0;
border-top: 0;
font-family: 'StratumNo1';
font-size: 14px;
}
header .search-form .search-input:focus {
outline: 0;
}
.footer-lockup {
height: 100px;
background-color: #1d1c1c;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.footer-lockup .copyright {
margin: 0;
color: white;
font-size: 14px;
font-family: 'Open Sans Light';
margin-left: 60px;
color: #4d4c4c;
width: auto;
}
.footer-lockup ul {
list-style: none;
margin-right: 60px;
padding: 0;
}
.footer-lockup ul li {
display: inline;
font-family: 'Open Sans Light';
font-size: 14px;
margin: 10px;
text-transform: uppercase;
}
.footer-lockup ul li:last-child {
margin-right: 0px;
}
.footer-lockup ul li a {
text-decoration: none;
color: #4d4c4c;
}
.social-logos {
position: relative;
min-width: 200px;
display: -ms-flexbox;
display: flex;
}
.social-logos .social-logo {
height: 20px;
min-width: 20px;
margin-right: 18px;
}
.social-logos .social-logo:last-child {
margin-right: 0;
}
.social-logos .social-logo .social-media {
text-align: center;
height: 20px;
cursor: pointer;
}
.social-logos .social-logo img {
height: 20px;
}
.social-logos .social-logo img.youtube {
height: 35px;
margin-top: -7px;
}
.projects-wrapper {
display: block;
background: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 130px;
}
<header>
<div class="logo">
<img src="/assets/img/YourLogo.svg" />
</div>
<p>Your Placeholder Text</p>
<nav class="site-nav">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</nav>
<form class="search-form">
<input placeholder="What are you looking for?" type="search" name="search-input" class="search-input" />
</form>
</header>
<div class="projects-wrapper"></div>
<footer>
<div class="footer-lockup">
<p class="copyright">© 2016 “Your Company Name” All rights reserved</p>
<div class="social-logos">
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/behance-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/facebook-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/linkedin-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/twitter-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/youtube-icon.svg" class="youtube" />
</div>
</div>
</div>
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</footer>
DEMO: JSFiddle
Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :
position: absolute
you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.
Secondly, add a wrapper to your entire project body & Make that flex. like so
<div class="wrapper"> //this should be flex
<header>..</header> //this "could" be flex depending on its contents
<div class="projects-wrapper"></div>
<footer>...</footer> //this "could" be flex depending on its contents
</div>
let me know if you are facing any other problems
I made code for You, please have a look, and tell mi is it good for You.
fiddle
I use calc() to do that
Use 100vh to get the 100% view-port height and subtract the height of header and footer.
min-height: calc(100vh - 50px);
where 50px is the height of header+footer.
partial support for ie