Wie kann ich die Höhe von HTML-Elementen mit Prozent angeben?

Question

Hallo,
Ich versuche die Seiten meines Fragebogens bzw. Experiementes zu stylen. Ich bin noch Anfänger was HTML und CSS angeht.
Auf der Seite ist ein großes Textfeld und ein Iframe nebeneinander. Lokal kann ich mithilfe von CSS die Weite und Höhe der beiden Elemente angeben und das funktioniert. Der selbe Code auf soscisurvey funktioniert jedoch nicht. Die Weite bleibt gleich und richtig, die Höhe jedoch scheint sich nicht mit einer Prozentangabe angeben zu lassen. Wie kann ich die Höhe von diesen Elementen prozentual angeben, bzw. so, dass sie anhand der Bildschirm- bzw. Fenstergröße angepasst wird?

Mein Code:

Style:

<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}

.column {
    float: left;
    padding: 10px;
}
.column.left {
    width: 60%;
}
.column.right {
    width: 40%;
}

#myTextArea{
    width: 100%;
    height: 50%;
}

#myIframe{
    width: 100%;
    height: 70%;
}
</style>

HTML:

<div class="column left">
    <div id="myIframe">
        <iframe src="xyz.de"></iframe>
    </div>
</div>


<div class="column right">
    <div>
        <textarea id="myTextArea" rows="100" cols="500">

Answer 1

Lokal kann ich mithilfe von CSS die Weite und Höhe der beiden Elemente angeben und das funktioniert. Der selbe Code auf soscisurvey funktioniert jedoch nicht.

Dann liegt es - so der logische Schluss - an dem HTML-Code oder besser gesagt an den HTML-Elementen, die "außen herum" liegen.

Die Höhe ist in HTML/CSS ein wenig kompliziert. Prozente kann man nur verwenden, wenn die Höhe des umgebenden Elements klar definiert ist (CSS layout: tricks and layout techniques, Relative div height (Stackoverflow)). Das ist freilich nicht so einfach, wenn die Höhe vom Browserfenster oder der Bildschirmgröße abhängig sein soll.

Fangen Sie einmal damit an, dass Sie ein <div> um die beiden Elemente außenherum setzen - und überlegen bzw. definieren, welche Höhe dieses haben soll. Versuchen Sie es als erstes mit height: 100%. Sehen Sie sich in dem Kontext einmal die Längenangabe hv an. Auch ein position: relative oder position: absolute kann sehr hilfreich sein, wenn man top und bottom definiert.

Comments

Super, vielen Dank für die schnelle Antwort.
Es lag an den HTML-Elementen, da die Höhe des umgebenden Elementes nicht klar war. Das konnte ich mit Prozenten nicht ändern (auch wenn alle umgebenden divs mit 100% Höhe definiert wurden war die Höhe immer noch nicht klar).
Geklappt hat es aber mit der vh Längeneinheit. Wenn die Höhe eines alles umschließenden divs mit vh angegeben wird funktioniert alles, da dann die Höhe des umschließenden divs klar ist und alle darunterliegenden divs davon prozentual die Höhe nehmen können.
Also vielen Dank für die Hilfe.