Cant get footer stay bottom

Question

Viped 0 Junior Poster in Training

14 Years Ago

Hi. I cant get the footer to stick in the bottom of the page. It only sticked to viewport. So when pages height goes over resolution it ruins the layout. Heres HTML and CSS

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Viped.net</title>
</head>
<body>
<div id="container">
<div id="top">
<?php
include ("get_user_info.php");
session_start();
if (isLogdin() == true) {

    $sql = "";
    $sql = "SELECT * FROM modules WHERE enabled = 1";
    $result = mysql_query($sql);

    echo "<a href='index.php'><img src='pics/logo.png'></a> ";
    echo "<a href='index.php?s=tekstit'>Tekstit</a> ";
    echo "<a href='index.php?s=upload_file'>Tiedostot</a>";
    while ($row = mysql_fetch_array($result)) {
        echo "<a href='index.php?s=$row[name]'>" . $row['name'] . "</a>"; 
    }

    if (isAdmin() == true) {
        echo " <a href='index.php?s=admin'>Admin</a>";
    }

    echo "<a href='log_out.php' class='right'>Log out</a>";
    echo "<a href='index.php?s=user' class='right'>$UserName</a>";

} else {
    echo "<a href='index.php'><img src='pics/logo.png'></a> ";
}
?>
</div>

<?php 
//Virheilmoitukset näkyviin
//ini_set("display_errors", 1);
//ini_set("error_reporting", E_ALL | E_STRICT);
//Varsinainen koodi alkaa
$sql = "";
$sql = "SELECT * FROM modules WHERE enabled = 1";
$result = mysql_query($sql);
$s = $_GET['s'];
if (isLogdin() == true) {
    echo "<div id='main'>";
    if ($s == null) {
        include ("etusivu.php");
    } else if ($s == "tekstit") {
        include ("texttitles.php");
    } else if ($s == "new_text") {
        include ("new_text.php");
    } else if ($s == "text") {
        include ("texts.php");
    } else if ($s == "text_edit") {
        include ("text_edit.php");
    } else if ($s == "admin" && isAdmin() == true) {
        include ("admin.php");
    } else if ($s == "user") {
        include ("user.php");
    } else if ($s == "upload_file") {
        include ("upload_file.php");
    } else if ($s == "modules") {
        include ("modules.php");
    }   
    while ($row = mysql_fetch_array($result)) {
        if ($s == $row['name']) {
            include ("modules/$row[name]/index.php");
        }   
    }
    echo "</div>";
    echo "<div id='footer'>";
    echo "testi";

} else {
    echo "</div>";
    echo "<div id='nologd'>";
    include ("log_in.php");
    if (regOpen() == true) {
        echo "<br>" . "Rekisteröidy:" . "<br>";
        include ("register.php");
    }
    $s = $_GET['s'];
    echo "</div>";
}
function isLogdin() {
    if ($_SESSION["logdin"] != "") {
        return true;
    } else {
        return false;
    }
}

function isAdmin() {
    if ($_SESSION['admin']) {
        return true;
    } else {
        return false;
    }
}

function regOpen() {    
    include ("connect.php");
    $sql = "";
    $sql = "SELECT regopen FROM site";
    $result = mysql_query($sql);
    $row = mysql_fetch_array($result);
    if ($row['regopen'] == "1") {
        return true;
    } else {
        die();
    }
}
?>
</div>

and the css

body {
    text-align: center;
    margin: 0 auto;
    background-color: #eeee11;
}

#top {

    text-align: left;
    background-color: #666666;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid;

}

#container {
    width: 100%;
    height:100%
    margin: 0 auto;


}

#main {
    text-align: left;
    width: 60%;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    -moz-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
    -moz-border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-color: #000000;
    padding: 10px;
    left: 20%;
    background-color: #ffffff;
    position: absolute;
    z-index: 1;
}

#nologd {
    text-align: left;
}

a {
    text-decoration: none;
    color: black;
}

#top img {
    vertical-align: middle;
}

#top a {
    line-height: 60px;
    color: white;
    margin-left: 10px;
}

#footer {

    width: 100%;
    clear: both;
    position: absolute;

    bottom: 0px;

    min-height: 350px;

    background-color: #666666;

    border-top: 1px solid;

    z-index: -2;

}

.right {
    float: right;
    margin-right: 20px;
}

.table {
    width: 600px;
}

ul {
    line-height: 0px;
}

I first thought that I should remove php code and leave only html but I decided to leave it there for now if someone has ideas to make code better.

html-css web-design

2 Contributors
4 Replies
105 Views
1 Hour Discussion Span
Latest Post 14 Years Ago Latest Post by Viped

Dani AI

Generated 9 Months Ago

Quick diagnosis: the footer is behaving like part of the viewport because it (or the main content) has been taken out of normal flow with positioning. 's CSS shows both position: absolute on the content and bottom: 0/positioning on the footer; those patterns make the footer either fixed to the viewport or sit where the container forces it. 's height:100% idea alone won't fix this if elements are absolutely positioned or if there are CSS mistakes (for example a missing semicolon in a rule can stop later properties from being applied).

Practical fix (recommended): stop absolutely/fixed positioning for the main layout and use a column flex layout so the footer stays at the bottom when content is short, but is pushed down (and scrolled out) when content grows. Example CSS to try:

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main {
  flex: 1 0 auto; /* make main take remaining vertical space */
  /* remove position:absolute and left:20% here */
}

#footer {
  /* static positioning — no bottom:0, no fixed/absolute */
}

If you must support very old browsers, use the classic “negative margin / push” sticky footer method (wrap content, give wrapper a min-height and a negative bottom margin equal to the footer height, then add a spacer the same height as the footer).

Troubleshooting checklist:

Remove position: absolute / position: fixed from #main and #footer.
Remove bottom: from footer unless it’s intended to be fixed.
Remove negative z-index on footer (it can hide/alter stacking).
Fix syntax errors (missing semicolons) so rules apply.
Ensure footer is placed after the main content in the DOM.
Use devtools to inspect computed position and bottom while scrolling.

These changes will make the footer behave as expected: anchored at the page bottom when content is short, and scrolled away when content is taller than the viewport.

All 4 Replies

Octet 45 Newbie Poster

14 Years Ago

You need to define the total height,

So:

*{
    height: 100%;
}

body{
    height: 100%;
}

I think that shall solve it, good luck!

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Viped 0 Junior Poster in Training · Answer 1 · 2012-08-30T14:30:43+00:00

Thanks, but it didn't. It only makes footer start from top.

Viped 0 Junior Poster in Training · Answer 2 · 2012-08-30T15:07:38+00:00

Okay fixed, not absolute positioning did the trick this time.

Viped 0 Junior Poster in Training · Answer 3 · 2012-08-30T15:44:34+00:00

Okay it almost did the trick now the footer is bottom but it moves with viewport. When it should be scrolled out.

Cant get footer stay bottom

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers