Search code examples
htmlcssfooter

Can't set footer at the bottom of the page

I'm currently working on a website and I'm getting crazy about this footer that won't stay at the bottom of the page. I already checked other topics with the same problem and nothing solved mine.

When I try "relative" the footer goes under the "topbox" (which is my header) and when I try "absolute" it goes in the middle of the page. 

 <header>
 <div class="topbox">
 <ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">Services</a></li>
 <li><a href="#contact">Clients</a></li>
  <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
 </ul>
 </div>
 </header>
<body>
<div class="wrapper">
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>     
</div>
<div class="bgbox">
<div class="box2">
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</a>
</div>
</div>
<div id="footer">© 2017 "TEXT" All Rights Reserved</div>
</div>
</body>

So here we have TOPBOX which is the header, Wrapper, scrollbtn (a pic of a mouse to indicate need to scroll), bgbox (background of the content), box2 (content), the "lorep ipsum" is the content and is very long which makes the user scroll. That's my problem, the footer is at the bottom of the page when you load it and thus in the middle of it when you scroll down.

Here is the CSS :

 body, html {
 width:100%;
 height:100%;
 background-color: #060b0f;
 padding:0%;
 background-image: url('../images/background3.jpg');
 background-size:cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 }
 /* HEADER */
 .topbox {
 margin:0%;
 position: fixed;
 top:0%;
 left: 0%;
 width:100%;
 z-index:999;
 text-align:center;
 overflow: hidden;
 padding:0%;
 font-family:Impact;
 font-size:20px;
 }
 .topbox ul {
  list-style-type: none;
  margin: 0%;
 padding: 0%;
 overflow: hidden;
 background-color: #459cfe;}

 .topbox li {
 display: inline;
 }
  .topbox li a {
 display: inline;
 color: black;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 }
 .topbox li a:hover:not(.active) {
   background-color: #397fcd;
 }
.active {
  background-color: #fff;
}
/*HEADER FIN*/
.scrollbtn {
position: absolute;
bottom : 0%;
left: 49%;
}

.hot {
color:#4080e1;
}
.box2 {
 margin-top:0px;
 margin-left:10%;
 width : 70%;
 opacity:1;
 color: black;
 overflow: hidden;
 text-align:center;
 z-index:4;

 background-color:transparent;


 }
 .box2 a{
 opacity:1;
  }
 .bgbox {
 margin-top:0px;
 margin-left:8%;
 padding: 5%;
 padding-left: 8%;
 width : 70%;
 position: absolute;
 top : 10%;
 left: 0%;
  background-color: rgba(255,255,255,0.5);     
 overflow: hidden;
 text-align:center;
 z-index:3;


 }
 .bgbox:hover {
 background-color: rgba(255,255,255,0.9);  
 }

 #footer {
 font-size:20px;
 cursor:pointer;
 color: black;
 text-align: center;
 width:100%;
 position:relative;
 left:0px;
 bottom:0px;
 background-color: #459cfe;
 }
.wrapper {
 height:100%;
 }

I've tried so many different things (changing body height, wrapping everything, relative, absolute, fixed, static, ...) that I can't think of anything else. I need an exterior point of view.

Solution

  • You're wanting to position your footer according to the bottom of a parent element. So you must give it a position:absolute

    It will find the nearest parent that isn't "static" to position itself relative to. So currently it'll sit at the bottom of "body". If you want it to sit at the bottom of ".wrapper", give .wrapper a position of "relative"

    EDIT: OK I see the problem with "bgbox" going beyond "header".

    1. Remove all "height 100%" - that sets the height to be the same as the viewport (visible are)

    2. Your "bgbox" is currently positioned absolute - so it won't be "pushed down" by other content, and it won't push other content down as it gets bigger. I'm not sure what you intend here. Do you want "bgbox" to be part of the regular content of the page? In that case, make it position:relative. (I think you don't want other content occupying the same space as bgbox, since you have text in it. Your css and the "bg" in the name makes me think maybe you copied a template from somewhere but misunderstood the original intention of bgbox?)

    Side note: You've got some HTML outside the body tag. I think you're confused between "head" which is a section of HTML describing the page, and potentially linking to resources, and "header" which is just a DIV with semantic information used by e.g. search engines.