nicht angemeldet
@@MrMurphy1
Und wie stelle ich unterschiedliche Höhen ein?
Mit CSS height.
Nein.
Damit kann man die Höhe aller Flexitems verändern; nicht aber erreichen, dass sie unterschiedliche Höhen haben.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title></title>
<style>
nav {
background-color: red;
border: 2px solid;
border-radius: 1em;
}
section {
background-color: aqua;
border: 2px solid;
border-radius: 1em;
}
aside {
background-color: yellow;
border: 2px solid;
border-radius: 1em;
}
#beispiel {
display: -webkit-flex;
display: flex;
align-items: center;
}
#beispiel nav, aside {
-webkit-flex-basis: 20%;
flex-basis: 20%;
}
nav {
height: 80px;
}
aside {
height: 50px;
}
#beispiel section {
-webkit-flex-basis: 60%;
flex-basis: 60%;
height: 150px;
}
section {
min-height: 100px; /* < kein Einfluß wenn Inhalt größer*/
}
</style>
</head>
<body>
<div id="beispiel">
<nav>
<ul>
<li>Zeile 1</li>
<li>Zeile 2</li>
<li>Zeile 3</li>
</ul>
</nav>
<section>
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
</section>
<aside>
Aside
</aside>
</div>
</body>
</html>
Eins ist aber eigentümlich, wenn ich bei nav „min-height“ > section setze, verändert es nur nav, setze ich es < bleibt es mit section gleich groß, schreibe ich jedoch „height“ und setze es kleiner, hat es auf die Höhe sehr wohl eine Auswirkung.
Anders in Prozentangabe. Mit „min-height“ setzt es die Höhe gleich mit der Höhe von „#beispiel section“ ganz gleich wie hoch die Prozentangabe ist. Mit „height“ bleibt es auf der Höhe seines Inhalts, ganz gleich welche Prozentangabe ich mache.
Bei „#beispiel section“ funktioniert „min-height“ allerdings nicht < als die Größe von nav.
Ganz schön verwirrend? Ist da die andere Methode nicht besser da ich jedes Element einzeln ansprechen kann?
LG Franz
Auge
Gunnar Bittersmann
Der Martin
Camping_RIDER