iasonas: border-rahmen soll sich automatisch an größe von browserfenster anpassen

ich verzweifle. will was ganz einfaches: einen rahmen, der sich (auch bei wenig textinhalt) immer der größe des browserfensters anpasst.

klappt an drei seiten, ausser unten.

wenn der text tiefer runtergeht als die höhe des browserfensters soll der untere rand nicht zu sehen sein, sondern erst dann, wenn man bis zum seiten- bzw. textende runter gescrollt hat. aber leider klappt auch das nicht.

recherschier seit ner stunde im netz. nichts.

weisst du wie das geht??

freue mich über konstruktive hilfe.

hier der code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="description" content="">
    
    <style>
    
    * { margin: 0; padding: 0; }
    
    .clear {
    	clear: both;
    	}
    	
    html, body {
        height: 100%;
    	}
    
    #rahmen {
        height: 100%;
        background-color: #d8c801;
        border: 10px solid #9d9100;
    	}
   
    </style>
   </head>
  <body>
  
  <div id="rahmen">
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  text text text <br />
  </div>
  
  </body>
</html>
  1. Hallo

    Probier mal statt

    html, body {
        height: 100%;
    	}
    
    #rahmen {
        height: 100%;
        background-color: #d8c801;
        border: 10px solid #9d9100;
    	}
    

    folgendes

          #rahmen {
             min-height: 100vh;
             background-color: #d8c801;
             border: 10px solid #9d9100;
          }
    

    Also die height Angaben für html und body löschen und bei #rahmen als Einheit nicht % sondern vh und statt height besser min-height.

    Gruss

    MrMurphy

    1. hey mrmurpy. danke. ...leider funktioniert das auch nicht. (ich schaus mir mit firefox an).

      1. Hallo

        Bei mir funktioniert das im FF, IE11, Chrome und Opera.

        Ich stell kurzzeitig erst mal deine Angaben online

        http://boratb.bplaced.net/index3.html

        und dann meine Lösung.

        http://boratb.bplaced.net/index4.html

        Wenn meine Lösung nicht deinen Vorstellungen entspricht musst du bitte genauer beschreiben, was nicht passt. Eine Problembeschreibung "funktioniert nicht" sagt nun mal nichts aus. Und was du gemacht hast verschweigst du leider auch.

        Oder hast du meine Lösung in eine andere Seite eingebaut? Dann musst du natürlich dafür sorgen, dass keine anderen CSS-Angaben meine Lösung überschreiben.

        Gruss

        MrMurphy

        1. super. du hast es gelöst.

          ich glaube wir haben uns grade nur missverstanden. hatte deine änderungen eingefügt, natürlich, wie du es beschrieben hattest. nicht mehr oder weniger. das ergebnis blieb aber dasselbe. das meinte ich mit "funktioniert nicht" :-)

          sonst hatte ich nichts weiter im style geändert. in dem quellcode deiner lösung unter http://boratb.bplaced.net/index4.html finde ich jetzt noch weitere angaben im style, die ich nicht auf meiner ursprungsseite definiert habe. vielleicht liegt das ja daran, dass es bei mir nicht funktionierte.

          keine ahnung. ich bin nur ein hobby-programmierer. deshalb ja auch ein höfliches und wertschätzendes hilfegesuch ;)

          vielen dank für deine hilfe mrmurphy.