fs error
HTML
<div class="fs-container">
<div class="left-column">
<div class="section l1">
<div class="wrapper">
<p>Manchmal hat man nur eine Frage.</p>
<a href="javascript:showL2()" class="button">Diskussionsgespräch</a><!-- /. button -->
</div><!-- /. wrapper -->
</div><!-- /. section -->
<div class="section l2">
<div class="wrapper">
<p>Ich brauch doch nur eine zweite Meinung.</p>
<a href="javascript:showL1()" class="button">Meinungsgespräch</a><!-- /. button -->
</div><!-- /. wrapper -->
</div><!-- /. section -->
</div><!-- /. left-column -->
<!----------------------------->
<div class="right-colum">
<div class="section s1">
<div class="right-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis maxime perspiciatis provident quis repellat rerum saepe voluptas. Accusantium doloremque obcaecati praesentium, qui quia reprehenderit saepe veniam. Eum, neque reprehenderit.
</div><!-- /. right-content -->
</div><!-- /. section-1 -->
<div class="section s2">
<div class="right-content">
<h2>Und man braucht nicht gleich ein ganzes Paket.</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis maxime perspiciatis provident quis repellat rerum saepe voluptas. Accusantium doloremque obcaecati praesentium, qui quia reprehenderit saepe veniam. Eum, neque reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis maxime perspiciatis provident quis repellat rerum saepe voluptas. Accusantium doloremque...
CSS
body {
-webkit-font-antialising: antialising;
-moz-font-antialising: greyscale;
font-family: "Verdana";
}
/******************
* Fullscreen Container
*******************/
.fs-container {
width: 100%;
float: left;
}
/******************
* Left column with identifying text
*******************/
.left-column {
height: 100%;
width: 45%;
position: fixed;
background: blue;
float: left;
color: white;
}
.right-colum {
height: 100%;
width: 55%;
position: relative;
float: right;
color: black;
}
.section {
width: 100%;
height: auto;
float: left;
position: relative;
padding-top: 30px;
}
.s1 {
background: red;
}
.s2 {
background: green;
}
.l1 {
background: yellow;
}
.l2 {
background: purple;
}
.right-content {
padding: 30px;
width: calc(100% - 120px);
margin: 0 auto;
}
JavaScript
var W = $(window).width(), H = $(window).height();
var _nH = "-" + H + "px";
$( document ).ready(function() {
fs_size();
function fs_size() {
$('.left-column').css({ "height": H });
$('.right-column').css({ "height": H });
$('.section').css({ "min-height": H });
}
$(window).bind('resize', function() { fs_size(); });
});
function showL2() {
$('.left-column').animate({ "top": _nH }, 300);
}
function showL1() {
$('.left-column').animate({ "top": 0 }, 300);
}