Durch­dachtes Webdesign & ziel­gerichtete Online Marketing Strategien
Moderne Websites & starke SEO Optimierung
Flexible Gestaltungs­möglich­keiten & schnelle Umsetzung
Hohe Kunden­zufriedenheit & höchste Service­orientierung
bFlow ist Ihr Partner für professionelle Web & Online Marketing Projekte
Durch­dachtes Webdesign & ziel­gerichtete Online Marketing Strategien
Moderne Websites & starke SEO Optimierung
Flexible Gestaltungs­möglich­keiten & schnelle Umsetzung
Hohe Kunden­zufriedenheit & höchste Service­orientierung
bFlow ist Ihr Partner für professionelle Web & Online Marketing Projekte

Full Height jQuery Elemente

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
  1. remove all CSS height hacks and 100% heights
  2. Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
  3. Get the height of a browser viewport. IF it’s larger than #wrapper, then set inline CSS for #wrapper to match the current browser viewport height (while keeping #truecontent intact)
  4. Listen on (window).resize event and ONLY apply inline CSS height IF the viewport is larger than the height of #truecontent, otherwise keep intact

    [js]$(function(){
    var windowH = $(window).height();
    var wrapperH = $(‚#wrapper‘).height();
    if(windowH > wrapperH) {
    $(‚#wrapper‘).css({‚height‘:($(window).height())+’px‘});
    }
    $(window).resize(function(){
    var windowH = $(window).height();
    var wrapperH = $(‚#wrapper‘).height();
    var differenceH = windowH – wrapperH;
    var newH = wrapperH + differenceH;
    var truecontentH = $(‚#truecontent‘).height();
    if(windowH > truecontentH) {
    $(‚#wrapper‘).css(‚height‘, (newH)+’px‘);
    }

    })
    });[/js]

War dieser Artikel hilfreich?
Scroll to Top