stopka i rozdzielczosc

Cześć,
Mam taki problem ze stopka, ze jak dam recznie np.500px height tych trzech kolumn to stopka nie jest na dole strony.
O to kod:

<div id="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div id="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div id="row1">adsdsa
</div>

<div id="row">
    <div class="column">
             <h2>Column</h2>
               <p>gfgdg</p>
   </div>
    <div class="column">
             <h2>Column</h2>
               <p>gfgdg</p>
   </div>
  <div class="column">
             <h2>Column</h2>
               <p>gfgdg</p>
   </div>
  <div class="column">
             <h2>Column</h2>
               <p>gfgdg</p>
   </div>
</div>
<div id="footer">
  <p>Footer</p>
</div>

html {
		height: 100%;

}
body {
		 min-height: 100%;
    position: relative;
	margin: 0 auto;
	
}
#header {
  
	width: 100%;
	height: 120px;
	margin-top: 40px;
	padding-top: 5px;
}

#topnav {
    background-color: black;
	position: fixed;
	opacity: 0.15;
	width: 100%;
	top: 0;
    left: 0;
    right: 0;
    height: 40px;
}
#row {
	margin-bottom: 20px;
}

#row, #row1{
	margin: 0 auto;
	width: 80%;
	
	margin-top:20px;
	height: 100%;
}

#row1 {
	background-color: red;
	height: 150px;
}

.column {
	text-align: center;
    float: left;
    width: 24.25%;
	background-color: yellow;

	margin-left: 1%;
}
.column:first-child { 
	margin-left:0;
}

#row:after {
    content: "";
    display: block;
    clear: both;
}

#footer {
    background-color: silver;
    text-align: center;
	position:absolute;
	bottom:0;
	width: 100%;
	//clear: both;
	height: 50px;
}

Czy wszystko z kodem dobrze? Tak sie koduje szkielet?

Wrzuć proszę całość na https://codepen.io/ albo https://jsfiddle.net/ to ci pomoę ;)

/jsfiddle.net/pokvbfuk/
ok

Wrzucone jak coś ;)