4 replies [Last post]
MarkVog
MarkVog's picture
Offline
newbie
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2013-07-24
Posts: 3
Points: 4

Hello,

I did some research on the internet and found a couple sollutions for letting the footer stick to the bottom of your webpage. I applied those, but when I put my website in windowed mode my footer isnt at the bottom anymore.
My code:

<div id="wrapper">
 
    <header id="header">
        <div class="wrap">
 
            <h1>Mark Vogelaar Portfolio</h1>
 
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="work.html">My Work</a></li>
                    <li><a href="about.html">About Me</a></li>
                    <li><a href="contact.html">Contact me</a></li>
                </ul>
            </nav>
        </div>
    </header>
    </header><!-- #header-->
 
 
    <div id="content" >
 
        <div id="contentheader">
            <section id="circles" class="wrap">
 
                </section>
 
 
            </section>
 
            <section id="circle-discription" class="wrap">
 
 
            </section>
        </div>
 
        <div id="contentcontent"></div>
    </div><!-- #content-->
 
 
    <footer id="footer">
        <h1>Mark Vogelaar & Toros Locos Copyright &copy</h1>
    </footer><!-- #footer -->
 
 
 
</div><!-- #wrapper -->

CSS:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;   /* Height of the footer */
    background-color: #2e3743;
}

Can somebody help me or knows what I am doing wrong?

Thanks,

~Mark

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi MarkVog, For that to work,

Hi MarkVog,
For that to work, you need to make sure the footers parents have a height and are positioned.
Can you link to the site?

MarkVog
MarkVog's picture
Offline
newbie
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2013-07-24
Posts: 3
Points: 4

RE:

The website isnt online. But here is the entire code of one of my pages:

 <div id="content" >
 
            <div id="contentheader">
                <section id="circles" class="wrap">
                        <h1>My Goals</h1>
 
                    <section id="circle1-section">
                        <div id="circle1"></div>
                        <h2>Mobile Design</h2>
                        <p> Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar
                            mee bezig ben en wat ik er van wil leren.Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar
                            mee bezig ben en wat ik er van wil leren.</p>
                    </section>
 
 
                    <section id="circle2-section">
                      <div id="circle2"></div>
                      <h2>Webdesign</h2>
                      <p> Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar
                          mee bezig ben en wat ik er van wil leren.Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar
                          mee bezig ben en wat ik er van wil leren.</p>
                  </section>
 
                    <section id="circle3-section">
                        <div id="circle3"></div>
                        <h2>UX Design</h2>
                        <p> Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar
                            mee bezig ben en wat ik er van wil leren.Hier komt een beschrijving van wat er onder webdesign hoort te staan. Namelijk dat ik daar
                            mee bezig ben en wat ik er van wil leren.</p>
 
                        <h3>See my Work!</h3>
                    </section>
 
 
                </section>
 
                <section id="circle-discription" class="wrap">
 
 
                </section>
            </div>
 
            <div id="contentcontent"></div>
    </div><!-- #content-->
 
 
    <footer id="footer">
             <h1>Mark Vogelaar & Toros Locos Copyright &copy</h1>
    </footer><!-- #footer -->

The parent element here is div#content, so does that one needs to have a height in order to work?

MarkVog
MarkVog's picture
Offline
newbie
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2013-07-24
Posts: 3
Points: 4

RE:

Work for 3/4 pages except one, the problem is, the height of that page is different in on any screen. It depends on the width of your screen. Its kinda responsive.

If i set it to 2000px height its enough on almost every browser, bot on large once its far too much.

How do i solve this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Try this

Footer at the bottom of the viewport

I am not a fan of the idea, as it is not appropriate to the web, but I wrote the article back in 2005, and it's still applicable.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.