Breite und Höhe unabhängig vom Bildschirm
Hallo,
ich habe versucht, mir mal ein Grundgerüst für meine Seite zu bauen. Aber irgendwie bekomme ich das nicht hin.
Header und Toolbar gehen über die komplette Seite, so wie ich das will
und der Footer ist fest am unteren Rand und geht auch über die komplette Seite
Nur beim Bereich dazwischen (Navigation und Content) schaff ich es irgendwie nicht, dass dieser komplett den Raum zwischen Toolbar und Footer ausfüllt.
Zum einen hab ich das Problem mit der Höhe: nehme ich height aus meinem CSS raus, dann läuft der Content hinter dem Footer weiter
Zum anderen hab ich das Problem mit der Breite: nehme ich width für den Content raus steht er nicht mehr neben meiner Navigation, sondern darunter
Ich hoffe, ich könnt mir helfen, wo mein Fehler liegt.
Der hier verwendete Code
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
display:flex;
flex-direction:column;
}
header{
background: #AFB4BE;
font-size:25px;
text-align:center;
}
nav{
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
background: #009933;
font-size:25px;
text-align:center;
}
main{
width:100%;
display:flex;
flex-direction:row;
}
aside{
flex:1;
padding: 40px 0 0 40px;
background: #990033;
font-size: 16px;
}
li{
list-style:none;
}
article{
flex:4;
background: #AA0000;
padding: 40px;
color: #000;
height:auto;
overflow:auto;
}
footer{
background: #123456;
color: #666;
font-size:44px;
text-align:center;
}
</style>
</head>
<body>
<header>
header
</header>
<nav>
toolbar
</nav>
<main>
<aside>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</aside>
<article>
metus massa, mollis vel, tempus placerat, vestibulum condimentum, ligula. Nunc lacus metus, posuere eget, lacinia eu, varius quis, libero. Aliquam nonummy adipiscing augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce fermentum, lorem non cursus porttitor, diam urna accumsan lacus, sed interdum felis congue vehicula.
Maecenas pede purus, tristique ac, tempus eget, egestas quis, mauris. Curabitur non eros. Nullam hendrerit bibendum justo. Fusce iaculis, est quis lacinia pretium, pede metus molestie lacus, at gravida wisi ante at libero. Quisque ornare placerat risus. Ut molestie magna at mi. Integer aliquet mauris et nibh. Ut mattis ligula posuere velit. Nunc sagittis. Curabitur varius fringilla nisl. Duis pretium mi euismod erat. Maecenas id augue. Nam vulputate. Duis a quam non neque lobortis malesuada. Praesent euismod. Donec nulla augue, venenatis scelerisque, dapibus a, consequat at, leo. Pellentesque libero lectus, tristique ac, consectetuer sit amet, imperdiet ut, justo. Sed aliquam odio vitae tortor. Proin hendrerit tempus arcu. In hac habitasse platea dictumst.
</article>
</main>
<footer>
footer
</footer>
</body>
</html>