Rik de Cort Rik de Cort - 2 months ago 11
CSS Question

add a div between header and footer that takes up rest of the view height

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><a href="#Home">Home</a>
</li>
<li><a href="#About Us">About Us</a>
</li>
<li><a href="#Services">Services</a>
</li>
<li><a href="#Work">Work</a>
</li>
<li><a href="#Contact">Contact</a>
</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><a href="#Home">Home</a>
</li>
<li><a href="#About Us">About Us</a>
</li>
<li><a href="#Services">Services</a>
</li>
<li><a href="#Work">Work</a>
</li>
<li><a href="#Contact">Contact</a>
</li>
</ul>
</footer>





DEMO: JSFiddle

Answer

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