We Keep Coding

my footer doesn't stay at the bottom of the site when I zoom out the site

Pls help me, I am making a site and my footer isn't staying at the bottom, when I zoom out the site. I'm a beginner so the code can be a little messy.
as you can see, the footer doesn't stay at the bottom, I have searched here for people with a similar problem with the code and I found some. And I tried some of the solutions, but none of them worked for me.
I think it doesn't work because there's something else wrong with my css, but I just cant figure it out.
html{
box-sizing:border-box;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
*,*:before,*:after{
box-sizing:inherit
}
body{
margin: 0;
overflow-x: hidden;
background-color: #f6f6f6;
}
ul {
padding: 4px 8px;
float: right;
}
a.nav-button {
padding: 8px 16px;
text-decoration: none;
color: black;
letter-spacing: 4px;
border: none;
outline: none;
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
}
a.nav-button:hover {
background-color: #cccccc;
}
img.logo{
padding-top: 14px;
height: 50px;
float:left;
}
div.menu{
position:fixed;
width:100%;
z-index:1;
background-color: #ffffff;
}
div.front_img{
padding-top:500;
vertical-align: middle;
display:inline-block;
max-width:100%;
width: 100%;
max-height: 60%;
position: relative;
background-image: url(../images/front_image.jpg);
background-size: cover;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
}
div.webpage {
max-width:980px;
margin:auto;
}
div.container {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.article {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.h3-container {
border-bottom:1px solid #ccc;
width:100%;
}
h3 {
font-size: 24px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
p {
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
div.footer {
position: relative;
padding-top: 6;
padding-bottom: 6;
padding-right: 8;
width: 100%;
text-align: right;
background-color: black;
color: goldenrod;
}
div.footer, a{
color: goldenrod;
}
div.footer-container {
position: relative;
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
width: 100%;
background-color: black;
color:goldenrod;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
border-bottom:1px solid goldenrod;
}
div.footer-background{
background-color: black;
overflow: hidden;
}
div.leverancier-wrap {
padding-left: 22;
background-color: white;
}
div.footer-content {
// tried position:fixed; here but didnt work :c
}
HTML
<div class="footer-content">
<div class="container" style="max-width:1564px">
<div class="h3-container" id="intoduction">
<h3 class="Welcome-title"><img src="images/location_icon.png" height="30" length="20" hspace="20"/>Installatietechniek Haaglanden bevindt zich hier.</h3>
</div>
</div>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
border-bottom: 5pt solid black;
}
</style>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.0442081, lng: 4.3370828};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[aint getting mah map]&callback=initMap">
</script>
<div class="leverancier-wrap">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide1.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide2.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide3.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide4.jpg" height="30" width="300">
</div>
<div class="footer-background">
<div class="footer-container" style="max-width:1564px">
<div class="footer-text">
<h3>Contactgegevens</h3>
<p>Installatietechniek Haaglanden<span style="display:inline-block; width: 280px;"><img src="images/telphone-icon.png" height="16" length="8" hspace="259"/></span>070 7620180</p>
<p>Burgemeester Elsenlaan 321<span style="display:inline-block; width: 297px;"><img src="images/mail-icon.png" height="16" length="8" hspace="276"/></span>info#installatietechniekhaaglanden.nl</p>
<p>2282 MZ Rijswijk<img src="images/facebook-icon.png" height="16" length="8" hspace="362"/></p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © installatietechniekhaaglanden.nl. Designed by ajeeth</p>
</div>
</div>

Negative margin method
Use a negative bottom margin like this. Keep the .push div empty.
HTML
<body>
<div class="wrapper">
...content...
<div class="push"></div>
</div>
<footer class="footer">All rights reserved</footer>
</body>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
Full demo: codepen.io
Other methods
You can also use negative top margins, calc(), flexbox, and grid to achieve the same effect in a better way.
Original source: This and 4 other ways originates from css-tricks.com

Give position: fixed; and to fix it at the bottom even if the content is little like the below demo
body {
margin: 0;
}
div.footer-content {
background: red;
position: fixed;
bottom: 0;
width: 100%;
}
HTML
<div class="footer-content">
this is the footer
</div>

You mean a Sticky Footer?
Change the CSS in
.footer-content { position: absolute; bottom: 0; width: 100%; }

jQuery Toggle Slide not working in Safari

I have a masonry grid with some hover effects. The hover effects work fine in Chrome but they don't work in Safari. See code here:
http://codepen.io/ameliarae/pen/MbKjWv
When you hover over an image in Safari this is what happens:
The purple overlay doesn't slide out, doesn't go the full width of its container, and appears to be cropped both horizontally and vertically. In Chrome it is working as it should (sliding out & the purple overlay is the full width and height of the container).
Here's the relevant code:
HTML:
<article>
<section class="portfolio-item">
<div class="overlay">
<div class="text-bloq">
<p>How Truthful are Food Labels? Interactive Quiz</p><br>
<span class="type">Design & Dev</span>
</div>
</div>
</section>
</article>
SCSS:
article {
-moz-column-width: 16em;
-webkit-column-width: 16em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: $purple;
}
}
.overlay{
position:absolute;
width: 100%;
display: block;
top:0;
left: 0;
text-align: left;
font-size: 1.55em;
font-family: $light;
color: $white;
opacity: 0.8;
height: 100%;
background: $purple;
.text-bloq{
display: block;
position: absolute;
margin: 50% auto;
left: 0;
right: 0;
padding:1em;
.description{
font-family: $light;
font-size: 0.75em;
}
.type{
font-family: $light;
font-size: 0.75em;
padding: 0.5em 0.65em;
border: 2px solid $white;
margin-top: 1em;
}
}
}
.portfolio-item{
position:relative;
overflow:hidden;
background-size:cover;
background-position:100%;
&:hover{
cursor: pointer;
}
}
.portfolio-item:nth-child(1){
background-image:url('http://placehold.it/600x600');
min-height: 600px;
&:hover{
#include animation('animatedBackgroundWork 10s linear infinite');
}
}
jQuery:
$(document).ready(function(){
$(".portfolio-item").hover(function(){
$(this).find(".overlay").toggle("slide", { direction: "right" }, 1000);
});
});
Full code here: http://codepen.io/ameliarae/pen/MbKjWv

I just figured it out. I had to replace overflow:hidden with overflow:visible; to the .portfolio-item class to get it to work in Chrome & Safari.
So it looks like this now:
.portfolio-item{
position:relative;
overflow:visible;
background-size:cover;
background-position:100%;
&:hover{
cursor: pointer;
}
}

Iframe in scrolling-system with jquery.mousewheel.js does not work fine

I was searching for a scrolling-system like this:
Scroll down to page, scroll up to top system like on a MEGA.co.nz download page
The scrolling works fine, but I've got a problem with an Iframe I want to use in the content div. If I open up the page the content part is 75% visible and above is the splash part. I just want that the splash part is fully visible if I open the page.
My CSS:
#font-face
{
font-family: 'hightide'; src: url(../resources/other/HighTide.woff) format('woff');
}
#font-face
{
font-family: 'ontwerp'; src: url(../resources/other/Ontwerp.woff) format('woff');
}
html, body {
height:100%;
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
p::selection {background: #000000; color:#ffffff;}
p::-moz-selection {background: #000000; color:#ffffff;}
a:link
{
text-decoration:none; font-weight:bold; color: #000;
}
a:visited
{
text-decoration:none; font-weight:bold; color: #000;
}
#wrapper
{
height:100%;
}
#splash
{
position: relative;
width: auto;
background: url(../resources/img/background2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
}
#splash-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#content
{
position: relative;
height: 100%;
overflow: auto;
}
#content-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#quote
{
text-align: center;
font-family: "ontwerp", arial, sans-serif;
position: fixed;
top: 30%;
left: 25%;
font-size: 3.5em;
color: white;
width: 50%;
height: auto;
}
#cloudlogin
{
background-attachment: fixed;
width: 100%;
height: 97%;
bottom: 3%;
position: relativ;
}
#headerbar
{
position: fixed;
z-index: 3;
background: url(../resources/img/gamer752-header.png);
background-size: 15% auto;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 7%;
top: 0%;
left: 0%;
background-color: black;
}
My HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/stylesheet.css" media="screen">
<title>amer752: Public</title>
<link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
<script src="resources/js/jquery-1.10.1.js"></script>
<script src="resources/js/jquery.mousewheel.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
/* scroll events */
$("#splash").on("mousewheel", function (e) {
if (e.deltaY <= 0) {
$('#splash').animate({
height: 0
}, 500);
}
});
$("#content").on("mousewheel", function (e) {
if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
$('#splash').animate({
height: '100%'
}, 500);
}
});
/* click events */
$("#splash-footer").on("click", function () {
$('#splash').animate({
height: 0
}, 500);
});
$("#content-footer").on("click", function () {
$('#splash').animate({
height: '100%'
}, 500);
});
});//]]>
</script>
<div id="headerbar"></div>
</head>
<div id="wrapper">
<div id="splash">
<div id="quote">
<p>The Art</p>
<p>Of</p>
<p>Doing Nothing.</p>
</div>
<div id="splash-footer">
<p>Click here or scroll</p>
</div>
</div>
<div id="content">
<div id="cloudlogin">
<iframe width=100% height=100% frameborder="0" src="cloud\index.html"></iframe>
</div>
<div id="content-footer">
<p>Click here or scroll</p>
</div>
</div>
</div>
</html>
I'm using Chrome and it will be enough when it just works for Chrome. Hope you guys know what's the matter.
PS. I'm new on stackoverflow. I do my best not to act like a total noob. If there's something I cloud do better just tell it me.
Thanks.

place a relative div under an absolute divs generated height by window

Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}

Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)

Dynamic div bottom

I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>

You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}

You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}