发表新帖
发表新帖

How to stop Sticky Footer from covering content…?

后端 未结
关注
4 1704
一生所求
一生所求 2021-01-31 05:39

I\'m using a \"sticky\" footer, but on a couple of pages it overlays the content. Is there any way to prevent this from happening, but retaining it\'s \"sticky\" quality?

<
相关标签:
4条回答
  • 無奈伤痛
    2021-01-31 05:45

    Have a look at this solution. You can use absolute positioning for all of your main content elements (header, article, footer). Use @media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.

    0 讨论(0)
  • 醉酒成梦
    2021-01-31 05:51

    In the last div before the footer just add style="height:100%;padding-bottom:0;" to overwrite the general rules you have some conflict probably with.

    0 讨论(0)
  • 别那么骄傲
    2021-01-31 06:00

    As amit said, you should put a margin-bottom for your body and use min-height instead of height:

    body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
}

    And you should remove height:100% from <body>

    Hope this helps!

    0 讨论(0)
  • 温柔的废话
    2021-01-31 06:06

    If your body div closed before footer div start then use margin-bottom property. Example if the page structure is

    <div id="body">
</div>
<div id="footer">
</div>

    then write

    #body{
   margin-bottom: (height of your footer);
}

    If your code structure is not like that. I mean your footer div is inside body div. Then use that margin bottom property to the div which close just before footer div start.

    0 讨论(0)
 看不清?
提交回复
热议问题