Css, Image With Height:auto, Covers Div Beneath It Upon Screen Resize (phone Held Horizontally)

I'm designing the mobile phone portion of my website. I have a, top:0%, position:fixed, banner image with, width:100%, and height:auto. As the phone is turned horizontally the bann

Solution 1:

Here is one way of doing it.

For example, if this is the HTML:

<div class="header">
    <imgsrc="http://www.placekitten.com/400/100"></div><divclass="main">Some content...</div>

You can use the following CSS to fix-position your header and absolute-position your main block:

.header {
    position: fixed;
    top: 0px;
    left: 10px;
    right: 10px;
    border: 1px dotted blue;
}
.headerimg {
    width: 100%;
    vertical-align: top;
}
.main {
    border: 1px solid blue;
    position: absolute;
    top: 147px;
    left: 10px;
}

To automatically reposition your .main block when the window re-sizes, you can use the following jQuery:

functionfixMainTop() {
    $(".main").css({
        "top": $(".header").outerHeight()
    });
}

fixMainTop();

$(window).resize(function () {fixMainTop();});

You call the fixMainTop() when the page load, and then whenever the window size changes.

However, the $resize function can lead to slightly jumpy looking screen, but I think that you can accept that since many websites using jQuery exhibit the same behavior.

Demo fiddle: http://jsfiddle.net/audetwebdesign/spxCj/

PS

You may not need the .resize action if the website has a fixed width... but it is good to see how it can be done.