Zitat von
Spooky
Hier gibt es auch noch eine Lösung mit Flexboxen:
http://philipwalton.github.io/solved...os/holy-grail/ Ist zwar mit fixen Breiten der seitlichen Spalten, aber ich denke die Flexbox Lösung funktioniert auch ohne viel Umwege mit relativen Spalten, habe es mir aber nicht im Detail angesehen. Wird halt auch nicht ohne weiteres in jedem (alten) Browser funktionieren.
Hallo,
das ist eine Lösung für die Zukunft. Leider funktioniert das nicht mit älteren IE < 11. Grad vor kurzem auf dem Schirm gehabt ...
PHP-Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Flexbox Examples - Contao Holy Grail</title>
<meta name="description" content="Some flexbox examples.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<style>
#wrapper, #container {
-webkit-box-direction: normal
}
#wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
#container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
#left .inside, #right .inside {
padding: 12px;
background-color: #e7e7e7
}
#left {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
#right {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3
}
#main {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
padding: 12px
}
@media all and (min-width:720px) {
#container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
#left, #right {
-webkit-box-flex: 0;
-webkit-flex: 0 0 180px;
-ms-flex: 0 0 180px;
flex: 0 0 180px
}
#main {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
}
@media all and (min-width:960px) {
#left, #right {
-webkit-box-flex: 0;
-webkit-flex: 0 0 240px;
-ms-flex: 0 0 240px;
flex: 0 0 240px
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="" id="wrapper">
<header id="header">
<div class="inside">
<h1>HEADER</h1>
</div>
</header>
<div class="" id="container" style="max-width: 90%; margin: 0 auto;">
<div class="" id="main">
<div class="inside">
<h2>This is the main content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum sequi nisi aliquam, ipsum tempore illo recusandae. Odit consectetur totam hic eius, commodi molestiae voluptates porro vel laboriosam, tempore, nostrum quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos mollitia vero facilis, deserunt omnis, fugit quod nam, neque iusto reprehenderit tempora. Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, molestiae, delectus nemo quibusdam odit fugiat velit facilis soluta odio ipsam ullam alias repellat. Ipsam porro voluptate adipisci nihil assumenda, ab.</p>
</div></div>
<div class="" id="left">
<div class="inside">
<h4>Sidebar 1</h4>
<p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div></div>
<div class="" id="right">
<div class="inside">
<h4>Sidebar 2</h4>
<p>Atque fuga inventore perferendis harum et culpa repudiandae, laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum ea at nobis dolores doloremque incidunt voluptate, dignissimos, veniam soluta temporibus sint error odit nesciunt ducimus excepturi quam, itaque eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div></div>
</div>
<footer class="" id="footer">
<div class="inside">
<h3>FOOTER</h3>
</div>
</footer>
</div>
</body>
</html>
Lesezeichen