CSS: 2 DIVs untereinander mit insgesamter Höhe zum Browserfenster

  • Thread starter Thread starter Deleted member 11691
  • Start date Start date
D

Deleted member 11691

Guest
Hallo,

für ein Projekt (dontrm.org) möchte ich eine neue Version schreiben und die alte Version zukünftig nurnoch zum anzeigen von Pastes benutzen. Kleines Problem bei der jetzigen Version: Sobald man etwas in das Textfeld eingibt, sieht man unten den Speichern-Button, was auch so gehört. Das Problem ist hier, dass der Button eine Höhenangabe von 5% und das Textfeld eine Höhenangabe von 95% bekommt, was bei besonders großen Bildschirmen nicht sehr toll aussieht. Gibt es eine Möglichkeit (außerhalb von Javascript) zu sagen, dass der Button (bzw nicht Button, sondern unten gehört in der neuen Version auch ein Div da hin) eine Höhe von 20px hat und das Textfeld darüber den Rest des Browserfensters bekommt, wobei ein Scrollbalken aber nicht erscheinen darf (mehr als 100% der Browserfensterhöhe verwenden)? Vielen Dank für jegliche Vorschläge.
 
Hallo,

danke für deine Antwort, allerdings kann ich nicht ganz verstehen, wie Du das mit dem Viewport meinst. Ich brauche ja 2 DIVs, welche ich an den Viewport genau in Höhe anpassen möchte und wie ich das mache, weiß ich nicht...
 
Schon, aber wie sage ich dem DIV darüber, dass da unten ein Button ist und sich das anpassen soll? Wenn ich das DIV oben auch mit einer Höhe von x% ausstatte, ist es bei sehr kleinen Bildschirmen (Smartphones) viel zu groß und bei rießigen Bildschirmen sehr klein und dann ist Platz dazwischen -> Unsinn. Wenn ich dem DIV sage, er soll 100% hoch sein, dann legt sich entweder der Button über das DIV oder das DIV ist immer im Vordergrund und es sähe so aus, als würde der Button garnicht existieren.
 
CSS ist leider etwas komplexer als das reine Anwenden einer Option.
Hier ein Beispiel wie du es realisieren könntest (CSS sollte noch ausgelagert werden)

Ich hab position:fixed verwendet weil es dann garantiert IMMER im Browser-Fenster ist. Kannst aber natürlich auch position:absolute verwenden.

HTML: 
<div style="position:fixed; top:0; left:0; right: 0; bottom:20px;">
<div style="height:100%; width:100%; overflow-y:scroll; background-color:yellow;">
CONTENT HIER
</div></div>
<div style="height:20px; position:fixed; bottom:0; left:0; right:0; background-color:green;">
BUTTON HIER
</div>

PS: Keine Garantie dass Internet-Explorer es mag
 
Last edited by a moderator:
@d4f, Danke... So müsste es eigentlich funktionieren... Werde ich morgen bzw. heute 'mal testen.
 
Scheint im Firefox zu funktionieren. Könntet Ihr eventuell mit anderen Browsern auch testen, ob beim Eintippen von Text in das Textfeld danach unten die "Save it"-Leiste erscheint? Bitte schreiben, welchen Browser ihr benutzt habt und ob es geklappt hat. Getestet habe ich es noch nicht in: Google Chrome, Internet Explorer, Opera, SWIron
 
Habe mal den Test mit 2 Bilder belegt.
 

Attachments

  • ie-start.jpg
    ie-start.jpg
    115.6 KB · Views: 279
  • ie-save.jpg
    ie-save.jpg
    119.8 KB · Views: 235
Irgendwie nimmt der Internet Explorer die Position-Values vom CSS nicht an :( ... Naja, dann muss ich wohl eine eigene Seite für den IE machen.

/Edit: Bitte nochmal überprüfen. ich hatte einen fehler drin (das Div, in dem die Textarea liegt war nicht mit dem Stylesheet verlinkt). Danke!
 
Last edited by a moderator:
You must log in or register to reply here.
Back
Top