Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

I'm currently working on a website where I want to attach a menu-bar to the bottom of the header using

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

Unfortunately, instead of sticking to the bottom of the parent div, the menu-bar is stuck to the bottom of the screen.

* {
    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>

It's worth noting that when running this snippet in full screen, the body appears to adjust its height to match the viewport, causing #menu to align with the bottom of the viewport as well.

This issue is new to me, despite my previous use of position: absolute; for similar tasks...

If anyone has a solution to this problem and can explain what might be causing it, I would greatly appreciate your help. Thanks!

htmlcsscss-position

Answer №1

To ensure that the header behaves like a child element, you must add position: relative. Without this, the header will act as if it is just within the body and not nested 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>

Answer №2

Remember to include position:relative in the parent element of the absolutely positioned element, so that it is positioned relative to its 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>

Answer №3

Ensure your header has a position: relative set

* {
    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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using ...

javascriptjquerycssstoppropagation

Receive notification of alert content when it is displayed

Having an HTML page with the following script: <Script> function Run() { alert("The Content Here"); return true; } </script> <button onclick="Run();">I Want It Now</button> If I were to open this page using firefox or Chrome, and ...

c#javascripthtmlvb.netwinforms

Incorporating full-screen viewing in the browser, these websites provide a seamless user experience with a "learn more" button strategically placed at the bottom. This button effortlessly

Have you ever noticed how websites like Heroku.com and dropbox.com automatically display a full-screen homepage tailored to your browser size? They have a clever button at the bottom that smoothly scrolls you down the page for more information. Have you wo ...

jqueryhtmlcssslidedown

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

javascripthtmlcss

Is there a way to modify or update the CSS classes and overall styling in .gsp files within the Grails framework?

What is the best way to dynamically update a DOM element's class and styling in response to specific conditions or events occurring in a .gsp file? ...

jquerycssgrails

Whenever I click the left mouse button, the website crashes

Why does clicking the left mouse button make the website scroll down? Any ideas for a solution? Check out the link here: I've tried everything since I just started working on my website. Be prepared to be shocked when you see the source code HAHAHHA ...

pythonhtmlcss

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Leveraging AngularJS ngBind with a JavaScript object

Within the given string, integrating a javascript object and embedding it into an ngBinding does not result in proper evaluation. I have a string where I want to incorporate a specific part of a javascript object and am transitioning to Angular for its use ...

javascripthtmlangularjs

Increasing the nth-child Selector in Jquery

Referring to this I am looking to cycle through the nth-child selector, which involves: var i = 1; var tmp = $(this).find('td:nth-child(i+1)'); // I wonder how this can be achieved i++; I have rows with dynamically generated columns i ...

javascriptjqueryhtmlcss

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

Emphasize multiple anchor points

I am looking to highlight two sections of a page simultaneously. Here is what I currently have: <li class="langLI" style="list-style-type:none"><a href="/non-discrimination-and-language-assistance##French">| French Creole</a></li> ...

htmlcss

Updating and showing a variable in a PHP file using JavaScript within an HTML webpage

My goal is to establish a variable in a PHP file on my server named "likes." Subsequently, I wish to incorporate a like button on my HTML webpage that, when clicked, will utilize JavaScript to modify the "likes" variable in the PHP file and increase it by ...

javascriptphphtmlvariables

I'm curious about the specific purpose of /1 in font styling at 16px

Can anyone explain the purpose of /1 in the font: 16px/1 style declaration? I removed the /1 from the code and noticed increased spacing between lines. What is the specific role of /1 in this situation? body { font: 16px/1 'Open Sans', sans ...

css

Display current weather conditions with the Open Weather API (featuring weather icons)

Hello everyone, I need some help from the community. I am currently working on a weather app using the openweather API. However, I'm facing an issue with displaying the weather conditions icon for each city. I have stored every icon id in a new array ...

javascripthtmlapivue.jsweather

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

javascripthtmlbootstrap-5

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

I am looking to achieve a specific behavior with an image, where it fits the viewport while maintaining its aspect ratio and allowing for zooming similar to how Chrome or Firefox handle local images. Here are the details of my project: The image I have is ...

javascripthtmlcssangularimage

What is the best way to define the width of text inside a div block?

I'm having trouble adjusting the width of the text in my code to only fill 80% of the body element. I've tried using both the width property and padding, but neither seems to be working for me at the moment. Here's the HTML: <body&g ...

htmlcsswebcss-float

Mobile Windows Z-Index

Struggling with the z-index issue on a video tag in Windows Mobile, particularly when it comes to my search box. <div portal:substituteby='common/search::search'></div> The goal is for the search box to appear above the video. ...

jqueryhtmlcsshtml5-videoz-index

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

javascriptjqueryhtmlvideo