How do I create a Layout-Container that takes up all of the screen estate minus it's margin? I tried using the calc function in conjunction with vh (calc(100vh-2em)) to no avail. Is there an elegant way to do this without javascript?
Same goes for adjusting the height of the sidebar, so it won't stretch over the container.
Thank you.
@charset "UTF-8";
body {
padding: 0em;
margin: 0em;
background-color: white;
height: 100%;
}
header {padding-bottom:2em;border-bottom:1px dashed white;}
#container{margin:2em; background-color:blue;min-height:100vh; height:100%; }
#sidemenu {
opacity:0;
float: left;
position: fixed;
width: 15%;
background-color: green;
height: 100%;
overflow: scroll;
margin-right: 1em;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
#sidemenu:hover {opacity:1; }
aside {
line-height: 150%;
}
svg { display:block; margin:2em auto;}
aside ul {
list-style: none;
top: 10px;
left: 0px;
margin-left: 0px;
overflow: scroll;
padding-left: 1em;
}
aside p {
}
aside ul>ul>li {
font-size: 0.8em;
color: white;
}
aside a {
color: black;
}
aside h1 {
color: white;
font-weight: bold;
padding-left: 1em;
margin-left: 0em;
font-size: 1em;
}
main {
float: left;
width: 43%;
position: relative;
margin-left: 18%;
margin-right: 1%;
display: block;
background-color:red;
padding:2em;
}
titel {
vertical-align:middle;
text-align: left;
display: block;
color: rgba(0,0,0,1);
margin: 0;
padding: 0;
font-family: "Century Schoolbook L", "Times New Roman", serif;
background-color: red;
font-size: 5em;
}
.bigger {
text-shadow: 1px 1px 4px #FFF;
color: black;
}
h2 {
text-align: left;
font-size: 40px;
padding-bottom: 5px;
border-bottom: 1px solid white;
color: white;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.col h2 {
color: #FFF;
}
#elcuerpo {
}
.koerper:hover {
background-color: green;
transition: background-color 1s ease-in-out;
}
#tips li {
margin-bottom: 1em;
}
s
.rules:hover {
transition: background-color 1s ease-in-out;
background-color: white;
}
#sectionside {
overflow: scroll;
padding-left: 1em;
right: 5em;
position: absolute;
float: right;
width: 15%;
background-color: rgba(0,0,0,0.05);
color: white;
margin: 0px 0px 0px 0px;
height: 100%;}
#sectionside ul {
list-style: none;
}
#sectionside h2 {color:white; font-size:0.5em;}
#sectionside li {padding-bottom:2em; font-size:1.5em; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; display:block; margin:0 auto; }
.titel:hover {
background-color: orange;
}
.intro {
margin-top:0em;
padding-top:0em;
font-size:4em;
color: white;
text-align: left;
text-shadow: 2px 0 #000000;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>A Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<aside id="sidemenu">
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="white" class="logo"/>
</svg>
<ul>
<li><a href="#Sone">Section One</a></li>
<li><a href="#Stwo">Sectino Two</a></li>
<li><a>Section Three</a></li>
<li><a>Section IV</a></li>
<li><a>Section V</a></li>
<li><a>Section V</a></li>
<ul>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
<li>Subsection</li>
</ul>
<li> <a>Section VI</a></li>
<li>Section VI</li>
</ul>
</aside>
<main>
<header>
<titel>HTML & CSS</titel>
</header>
<section id="section one">
<h2> </h2>
<p>Lorem Ipsum</p>
</section>
<div id="sectionone">
<h2>Display: Inline</h2>
<p> Display Inline will not break the Layout, it can push other elements away horizontally, but not vertically. It also can not take height or width values.
</div>
<h2>Display: Inline-Block</h2>
<p>An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.</p>
</main>
<section id="sectionside">
<h2>Rules</h2>
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</section>
<div style="clear:both;"></div>
</container>
</body>
</html>
