发表新帖
发表新帖

css footer not displaying at the bottom of the page

后端 未结
关注
9 1420
攒了一身酷
攒了一身酷 2021-01-31 21:56

this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?

/*footer */
#footer .column
相关标签:
9条回答
  • 情书的邮戳
    2021-01-31 22:15 
    #main {padding-bottom: 150px;} /* Should have the same value of footer's height */ 
#footer {position: relative; 
margin-top: -150px; /* footer's height */
    0 讨论(0)
  • 一向
    2021-01-31 22:15

    I guess what you mean is that you would like the footer to remain at the bottom of the page, even when there is insufficient content on the page to fill the height of the viewport?

    If that is the case, you can use this trick: CSS sticky footer - http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/ or http://css-tricks.com/snippets/css/sticky-footer/

    The sticky footer trick typically relies on declaring a minimum-height on a wrapper div. This means that you will have to reformat your HTML code as follow:

    <div id="wrap">
    <div id="content">
        /* Main body content */
    </div>
</div>

<div id="footer">
    /* Footer content here */
</div>

    For the CSS:

    html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer { 
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
}

    If your footer may have variable height, you will have to set the bottom padding of #content, and top margin of #footer with JavaScript. The value depends on the computed height of the #footer element itself.

    0 讨论(0)
  • 故里飘歌
    2021-01-31 22:16

    There's really two main options:

    1. Fixed Footer - the footer always is visible at the bottom of the page
    2. Pushed Footer - the footer is pushed to the bottom of the page even when the content doesn't fill the window

    The easier of the two is the fixed footer.

    Fixed Footer

    To make the footer fixed, in CSS set the footer's position to fixed position:fixed and position the footer to the bottom of the page bottom:0px. Here's a code snippet from CSS-Tricks.

    #footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

    Pushed Footer

    A pushed footer is a bit trickier. Here's a great graphic showing why the footer doesn't stay at the bottom of the page when there isn't enough content:

    Pushed Footer Issue Visual

    Basically, the problem is happening because the footer element is 'pushed' under the element that is above it and the height of that element isn't as long as the height of the page. In order to fix this, you need to make sure that the footer gets 'pushed' down the full height of the page (minus the height of your footer).

    Here's how to do it:

    HTML

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

    CSS

    html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

    Here's a more detailed tutorial on how to do it as well as the source of the code above.

    And here's a working demo of the code from the same source.

    0 讨论(0)
  • 闹比i
    2021-01-31 22:21

    I solved this by simply using min-height on the main container of my HTML.

    So HTML:

    <body>
    <div class="top-nav">My Nav Bar</div>
    <div class="main-container">
        All my content
    </div>
    <div class="footer">
        My footer
    </div>
</body>

    and then CSS

    .top-nav {
    height: 4rem;
}
.main-container {
    min-height: calc(100vh - 4rem - 4rem);
}
.footer {
    height: 4rem;
}

    With SCSS you can use variables to track the top-nav and footer heights and then do something like

    .main-container {
  min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}

    This is not a perfect solution because it won't put your footer exactly at the bottom of the viewport but it will push it down to the bottom when the content is too short and prevents the footer from being way up in middle of the screen.

    0 讨论(0)
  • 情歌与酒
    2021-01-31 22:22

    Fixed your footer in bottom with cool effect
    Check full page design in jsfiddle Jsfiddle

    <body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
    <h1>kulbhushan charaya</h1>
</footer>
</body>

    and css is

    body {
    background: #ffffff none repeat scroll 0 0;
    padding:40px 0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
header ul li {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
header ul li a {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footer h1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 0 15px;
  z-index: 1;
}
    0 讨论(0)
  • 傲寒
    2021-01-31 22:22

    you may need to set the html element height to 100%, otherwise your page itself will only be the necessary height for your content. I ran into this myself.

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