固定标题与下面的内容重叠

Question

I have the following HTML,

 header { background: #f6f6f6; width: 100%; min-height: 120px; position: fixed; z-index: 100; top: 0; padding: 5px 0; } 

 <header> <div class="container"> <div class="row"> <a href="index.html"> <img src="images/logo.png" class="img-responsive" alt=""> </a> </div> </div> </header> 

As you can see it is a fixed header and I've given it a min-height of 120px. This makes the header overlap the content below and I've prevented that by giving the div that wraps the content a margin-top of 90px.

This works fine on larger layouts but when the layout gets smaller and the image starts re-sizing(due to the .img-responsive class) its height reduces and it results in an empty space below it. I could write a media query and reduce the margin-top but I was wondering if there is some other way to prevent this from happening.

Answer 1

You can use JS to update the margin based on the header size on page load.

$(function() {
    var headHeight = $('header').outerHeight();

    $('.welcome-home').css({'margin-top': headHeight });
});

This will get the total height of the header element and then apply that size as margin-top to .welcome-home .

Here's a fiddle: https://jsfiddle.net/13n7mpbk/ If you try adding to the header, it will automatically increase the margin as needed when the page is loaded.