Autor Zpráva
Filip Jirsák
Profil
Zdravím, mám následující kód:

<html>
<head>
<style>
html, body {
height: 100%;
}
.main {
min-height: 100%;
background-color: aqua;
}
.body {
background-color: orange;
padding: 50px;
min-height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="body">
</div>
</div>
</body>
</html>


Předpokládal bych, že .body bude mít stejnou výšku, jako .main. Kupodivu Firefox ignoruje vnořené min-height a klidně nastaví výšku nižší (v DOM inspectoru je pak vidět např. min-height: 800px, height: 300px). Čím to? Je to tak správně, nebo to lze nějak obejít?
mh
Profil *
Narazil jsem na stejny problem. Mate nekdo prosim reseni? Diky
Alutom
Profil *
Tak mě napadá, proč tam vlastně máte min-height a ne rovnou height? S height to funguje, protože blok body, html, .main i .body budou mít vždy width 100% procent a stačí nastavit:
.body {overflow: scroll;}

...a element main bude scrollovat.

Snad jsem aspoň trochu pomohl. ?
Alutom
Profil *
Oprava mého předchozího příspěvku:
Tak mě napadá, proč tam vlastně máte min-height a ne rovnou height? S height to funguje, protože blok body, html, .main i .body budou mít vždy width (má být height) 100% a stačí nastavit:

.body {overflow: scroll;}


...a element main
(má být .body) bude scrollovat.

Snad jsem aspoň trochu pomohl. ?
Toto téma je uzamčeno. Odpověď nelze zaslat.