nicht angemeldet
Hallo
An den height-Angaben und dem "Prozent-Problem" hat sich seit der Einführung von CSS2 im Jahr 2000 nichts geändert.
Damit bei Containern wie div height-Angaben wirken, muss mindestens ein umgebendes Element eine height-Angabe in einer anderen Einheit als Prozent enthalten.
Das können auch html oder body sein. Wobei dann deren Flexibilität eingeschränkt wird.
Dir eine konkrete Problemlösung vorzuschlagen ist schwierig, da du zu wenig Informationen gibst.
Um die Flexibilität von html und body zu erhalten habe ich deshalb bei meinem Beispiel ein div.wrapper eingefügt, dem eine Höhe von 100vh und einen grünen Rahmen gegeben. Du kannst natürlich auch anderen Einheiten wie px, em oder rem verwenden. vh ist ähnlich flexibel wie Prozent. Infos zu vh bietet die Suchmaschine deiner Wahl mit dem Suchbegriff "css einheit vh".
Andere Spielereien wie overflow habe ich weggelassen, da die mit dem height-Problem nichts zu tun haben. Die kannst du nach und nach ja wieder einfügen.
Damit greifen auch die %-Werte von .outerfloating-box und .floating-box. Du kannst mit denen ja mal etwas rumspielen und dabei auch die Fenstergröße des Browsers ändern.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
margin: 0;
}
.wrapper {
height: 100vh;
border: 3px solid green;
margin: 0;
}
.outerfloating-box {
display: inline-block;
width: 50%;
height: 40%;
border: 3px solid blue;
}
.floating-box {
display: inline-block;
width: 35%;
height: 50%;
margin: 10px;
border: 3px solid red;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h2>The New Way - using inline-block</h2>
<div class="outerfloating-box">
<div class="floating-box">
<p>Floating box</p>
</div>
<div class="floating-box">
<p>Floating box</p>
</div>
</div>
</div>
</body>
</html>
Gruss
MrMurphy
Matthias Apsel
Gunnar Bittersmann
Der Martin