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

What is the best way to include an arrow in a dropdown menu?

I've been working on restyling a Select box and I want to add a CSS arrow that rotates as the Select box expands. However, I'm struggling to align the arrow properly with the Select box. I've tried using code from the internet, but it hasn&a ...

csshtmlhtml-selectcss-shapes

`Anomaly detected in image grid display`

The images are not resizing according to the container. Despite setting both height and width to 100%, the image is not taking the width of the outer column container. https://i.sstatic.net/10eMg.jpg This is what I expected This is the result I am current ...

htmlcssbootstrap-4

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

javascriptjqueryhtmlcsshighcharts

When the HTML code is rendered in a web browser, the CSS styles are not being

I am utilizing adminer within a docker container. When testing services, I utilize the URL mydomain.tld. In order to interact with this container directly, one option is to expose and map a port, such as mapping port 8081 to the adminer port 8080. Access ...

cssdockerbrowseryawsadminer

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

htmlcsssvg

What is the best way to load specific CSS in an rhtml file?

In the world of website development, we often find several pages that are generated from the same layout.rhtml file. Along with a global css file, each page may also have its own unique css file - such as page1.css for page1.rhtml and page2.css for page2.r ...

cssruby-on-railsruby

Vuetify Card Overflow: Handling Multiline Text with Ellipsis

I have been experimenting with Vuetify cards and encountered an issue with their height. In the image below, you can see that the cards' height varies until it reaches a specified max-height of 225px. I want to implement a text-overflow: ellipsis feat ...

htmlcssvue.jsvuetify.js

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

javascripthtmlcssforms

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

htmlcssfirefoxoverflow

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...

phphtmlsmartycs-cart

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column should accommodate 2 inputs. The numb ...

csscss-grid

Customizing the language parameter for the apply button script on LinkedIn

Our company's website features the AWLI button which allows users to apply for jobs using their LinkedIn profile. <div name="widget-holder"> <script type="text/javascript" src="https://www.linkedin.com/mj ...

javascripthtmllinkedin-api

Having trouble with clicking on an icon link within a list

Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated! <div class="social-links"> <ul> <li class="m-link"> <a href="&q ...

htmlcsshovericons

Is there a way to stop objects in a particular list from being dragged into another nested ul using jquery sortable?

I am faced with a challenge regarding nested lists, specifically when it comes to preventing parent-parent list items from dropping into an inner <div> within an <li> <div> that already contains its own <ul> <li> list. Additio ...

jquerycsshtml

How can I correctly focus on 'highlight' events using the tab key on an HTML element?

I'm struggling to figure out the event that is triggered when an element gains focus through tab navigation. I want all buttons in the codepen provided to expand to full size when tabbed over. https://codepen.io/anon/pen/YopBaz Currently, I have achi ...

htmlcss

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Post your artwork on Facebook's timeline

I am working on a website that allows users to create custom smartphone cases. One feature I want to implement is the ability for users to share their design on Facebook, including the actual design itself. I have the object and the canvas with the 's ...

javascriptfacebookhtmlcanvas

I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of ...

cssblogger

HTML input field's placeholder text is truncated at the end

My HTML input form has a field with placeholder text that extends beyond the padding and gets cut off at the end. https://i.sstatic.net/9r46F.png I am unable to pinpoint the source of this issue. ...

htmlcsspaddingplaceholderinput-field

What is the best way to retrieve the values from the labels for two separate buttons?

I designed a pair of buttons with a single label below. Both buttons acted as standalone entities. <label for="buttons" class ="val">0</label> <input class="btn btn-primary button1" type="button" ...

javascripthtmljquery