CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxcss-position
NiPfi
NiPfi

Reputation: 1720

How to correctly make a relative positioned div fill an absolute positioned parent

I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:

footer > div {
    display: flex;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: flex-end;
    align-items: center;
}
footer {
    position: relative;
    display: table-row;
    height: 40px;
    background-color: gray;
}

I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically. To make it work in chrome, I included the following rule

@media screen and (-webkit-min-device-pixel-ratio:0) { 
footer > div { position:relative; }
}

The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?

The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.

If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.

I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.

Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.

Thank you very much!

Upvotes: 0

Views: 2752

Answers (1)

danjah
danjah

Reputation: 1246

You could solve this by replacing the following for footer > div:

top: 0;
right: 0;
left: 0;
bottom: 0;

..with:

width: 100%;
height: inherit;

You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.

Upvotes: 3

Related Questions