Problem with CSS Sticky Footer implementation

前端 未结 5 661
野趣味
野趣味 2020-11-29 07:52

Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the de

5条回答
  •  轻奢々
    轻奢々 (楼主)
    2020-11-29 08:21

    here you can find some code as follows

    Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

    In CSS:

    height: 100%;
    }
    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer, .push {
    height: 4em;
    }
    

    Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

    In HTML Body:

    Your website content here.

      

提交回复
热议问题