div mit 100% height minus margin als abstand zum rand
Ich brauchte einen div der immer bis zum unteren Browserrand geht und oben einen trotzdem einen Abstand hat und der Scrollbalken sollte felherfrei funktionieren. Also 100% height und margin-top. Mit css allein war das nicht zu machen da der Scrollbalken sich um das margin-top nach unten rausgeschoben hat, also musste jquery herhalten.
Hier mal ein Beispiel für 100% height und margin-top: 20px;
html:
<div class="meindiv"> START<br /> text<br /> text<br /> text<br /> ENDE </div>
css:
.meindiv { height:100%; margin-top:20px; width:120px; overflow: auto; /*overflow-x: hidden;*/ }
js:
var habstand = 20 //var wabstand = 20 $(document).ready(function(){ // 100% höhe minus px die margin sein sollen var hohe = window.innerHeight; $(".meindiv").css("height",hohe - habstand); // 100% breite minus px die margin sein sollen //var weit = window.innerWidth; //$(".meindiv").css("width",weit - wabstand); }); $(window).resize(function(){ // 100% höhe minus px die margin sein sollen var hohe = window.innerHeight; $(".meindiv").css("height",hohe - habstand); // 100% breite minus px die margin sein sollen //var weit = window.innerWidth; //$(".meindiv").css("width",weit - wabstand); });
Das ganze funktioniert im: FF Opera Chrome Safari, jeweils in den aktuellen Versionen getestet. Der IE iss mir egal, arbeite nur mit mac. Wenn es einer im IE testen kann, bitte kurz n Kommentar hinterlass ob es da auch funktioniert, bitte dann mit IE Version.
One Comment
→
Jo kruzifiy Luja sog I, iss des geil.