nicht angemeldet
Prozentuale Höhe versch. Elemente an der Höhe des Elternelements
2 
MudGuard
Prozentuale Höhe versch. Elemente an der Höhe des Elternelements
Guten Tag,
da ich aus Privatgründen jetzt bereits einen Monat kein Internet hatte, ist mein Thema zum Problem bereits im Archiv gelandet, so entschuldige ich mich für dieses "Doppelposting".
Problem: Wie kann ich die Höhe des Bildes beispiel.png auf 15% des Divs #UnterDiv setzten? Egal ob ich die Höhe auf 10% o.ä. ändere, die Größe bleibt bei 100%.
Der Ausgangscode sieht im Moment so aus:
CSS Code:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#wrapper {
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: blue;
}
#MainDiv {
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: red;
}
#UnterDiv {
text-align: center;
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: lime;
}
.imglink {
margin: auto;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden !important;
background: black;
}
.image {
height: 15%;
}
Der HTML Code (Nein, das ist kein sinnloser Div-Müll, da die Divs ausschließlich zum Gruppieren mehrerer Elemente vorhanden sind, hier ist nur das Grundgerüst):
<body>
<div id="wrapper">
<div id="MainDiv">
<div id="UnterDiv">
<a href="beispiel.html" class="imglink">
<img src="beispiel.png" alt="Beispiel" class="image" />
</a>
</div>
</div>
</div>
</body>
Das letzte Statement zum Problem wurde von Beat geschrieben und lautete:
Also sind Sie inline Elemente, die so gross werden, wie die intrinische Grösse des Inhaltes.
Ja, genau das ist mein Problem. Im Beispiel ist zwar der Wrapper exakt 100%, der #MainDiv allerdings nicht mehr! Der UnterDiv dann natürlich auch nicht usw. Wie ist dies lösbar?
Schau dir an, wie hoch dein Wrapper ist.
Derzeit orientiert er sich am Platzbedarf des Inhalts.
Bei mir nicht nachvollziehbar. Der Wrapper deckt die Seite im Moment komplett ab.
Grüße, CL
--
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
-
Hi,
body, html {
height: 100%;
}html hat also die Höhe des Viewport, body 100% davon, also ebenfalls die Höhe des Viewports.
#wrapper {
height: auto !important;
height: 100%;Die Deklaration mit important hat höheres Gewicht.
#wrapper hat also height:auto. Richtet sich also nach dem Inhalt.#MainDiv {
height: auto !important;Diese hier greift (wegen important), also Höhe wie durch Inhalt bestimmt.
height: 100%;
Selbst wenn das hier greifen würde: das übergeordnete Element hat height:auto, also bedeuten die height:100% für dieses Element ebenfalls height:auto.
Selbiges gilt dann für
#UnterDiv {
height: auto !important;
height: 100%;.imglink {
height: auto !important;
height: 100%;
}Die Höhenangaben hier sind nutzlos - a ist (da keine Änderung vorgenommen wurde) ein non-replaced inline-Element, height wird also ignoriert, die Höhe richtet sich nach dem Inhalt.
.image {
height: 15%;
}Prozentuale Höhe hier läuft also auf height:auto raus.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hallo Andreas,
Vielen Dank! Das hat mein Problem gelöst. Das
height: auto;war in einem Codeschnipsel aus dem Internet. Da wurde anscheinend was falsch gemacht ;)Grüße, CL
--
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
-