CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Patrick
Patrick

Reputation: 2781

Scrollable div after fixed top div

I need to build a mobile html page with a fixed Header and a Scrollable List right after. The header contains a logo that has a fuild size regarding the dimensions of the container.

The problem is that the first element of the list gets under the header and I don't have a height defined because the header has a fluid height.

The HTML:

<header>
    <figure>
        <img src="images/logo.png" />
    </figure>
</header>

<main>
    <ul id="shops-list">
        <li>Company #1</li>
        <li>Company #2</li>
    </ul>
</main>

THE CSS:

// global definition for fluid images
img {
    max-width: 100%;
}

header {
    width: 100%;
    position: fixed;
    top: 0px;
}

header figure {
    width: 100%;
    padding: 5px 0 5px 0;
    text-align: center;
}

header figure img {
    max-width: 100px;
}

main { 
    ???
}

EDIT:

Fiddle: https://jsfiddle.net/q42yaaz4/2/

Upvotes: 2

Views: 91

Answers (1)

Rohit Kumar
Rohit Kumar

Reputation: 2031

you can use pure JS to do that since your header height is not fixed. It will be better if you add an id to your header and main. Suppose you've added that.

var h = document.getElementById("header").offsetHeight;
document.getElementById("main").style.marginTop = h+"px";

You can use this JS to create a margin-top on main which is equal to the visible height of the header

UPDATE

Fiddle, I have added the following code so to accompany the margin-top of main on resize of window, because you are designing a fluid layout.

var el = document.getElementById("header");
document.getElementById("main").style.marginTop = el.offsetHeight+"px";

window.onresize = function() {
document.getElementById("main").style.marginTop = el.offsetHeight+"px";
};

try resizing the fiddle window and see the margin-top is updated instantly so that main always appear just below header

Upvotes: 3

Related Questions