1

I have a website where I am trying to stick a menu-bar to the bottom of the header by using

#menu {
    position: absolute;
    bottom: 0;
}

However, the menu-bar sticks to the bottom of the screen instead of the bottom of the parent div.

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid #FF0000;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}
<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>

Also note that if you run this snippet in full screen, the body seems to change its height to that of the viewport and #menu also goes to the bottom of the viewport.

I have never had this problem, even though I've used position: absolute; a lot for this kind of work...

Does anyone know how to solve this and what causes this? Thanks in advance!

wohe1
  • 755
  • 7
  • 26

3 Answers3

4

You need position: relative on the header. Without that it won't be like it's a child element. Without relative it'll behave like it's just in the body and not within a parent element:

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid #FF0000;
    position: relative;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}
<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>
2

Don't forget to put position:relative to the parent of the absolute element, so that it will be relative to the parent

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid red;
    position:relative;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}
<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
2

You have to set a position: relative in your header

* {
    font-family: Arial, sans-serif;
    border: 0 solid black;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 500px; /*for testing*/
    background-color: #00FF00;
}

#header {
    height: 270px;
    border: 1px solid #FF0000;
    position: relative;
}

#menu {
    display: block;
    height: 50px;
    padding: 16px;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    border: 1px solid #0000FF;
}
<!DOCTYPE html>
<html lang="nl">
<head>
</head>
<body>

    <div id="header">

        <div id="menu">
            <a href="/" id="home">Home</a>
            <a href="/evenementen.php" id="evenementen">Evenementen</a>
            <a href="/fotos.php" id="fotos">Foto's</a>
            <a href="/contact.php" id="contact">Contact</a>
            <a href="/inschrijvingen.php" id="inschrijvingen">Inschrijvingen</a>
            <a href="/partners.php" id="partners">Partners</a>
        </div>
    </div>

</body>
</html>
Marvin T
  • 123
  • 8