Can't set height in percentage units for absolute CSS

HTML-CSS
#1

I’m not able to set the height in percentage for absolute elements.
Why is this?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute positioning testing</title>
    <style>
        .positionedParent {
            border: 2px solid red;
            background-color: aqua;
            position: relative;
            float: left;
            height: 100%;
            width: 100%;
        }

        .sopp {
            width: 100%;
            /* I can set in px, but not in % */
            /* height: 10px; */
            height:50%;
            
            background-color: rgb(8, 184, 200);
            position: absolute;
        }
    </style>
</head>

<body onload="alert(document.getElementById('a').offsetWidth);">
    <div class="positionedParent">
        <div class="sopp">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime laboriosam, iure dolor est,
            eum temporibus numquam magnam atque sint, ipsam nisi provident quidem unde sapiente voluptas quas fugit
            eveniet cumque natus doloribus amet soluta!</div>
    </div>


    <style>
        #a {
            position: absolute;
            /* Without position absolute the width is, well, as expected, 100px. */
            /* But with absolute positioning the width is 736px
            When an element has position:absolute, the width and height percentages are calculated based on the whole browser dimensions. */
            /* So u gotta set % units based on the whole body or use a different unit altogether. */
            width: 50%;
        }
    </style>



    <div style="width:200px;">
        <div id="a">Hello</div>
    </div>
    <div style="width:200px; position:relative">
        <div id="b">HEYLO</div>
    </div>



</body>

</html>
#2

This works for me. Would you mind setting up a codepen to demo the problem?

#3

Codepen link :- https://codepen.io/guruthecoder/pen/XWRmbEV

#4

@gururajankappa, just a quick note since someone is already helping you,

style elements are not valid in the body element. They should only be used in the head element.

1 Like
#5

:joy:, Really silly of me. But it still doesn’t work :frowning_face:

#6

I knew it wouldn’t but wanted to point it out so you’d have one less thing to correct.

1 Like
#7

Oh ok. Could you tell me what the problem is?
Thanks!

#8

You need to set a height for html and body otherwise using the height in percent won’t work properly.

html,
body {
    height: 100%;
}

I think it worked for me initially because I was using the FCC code editor, which must have some code for that already.

1 Like
#9

Thanks a lot!! It worked for me. Can you explain why we should do this, I’m really new to all this. This might be a simple thing I don’t know, but, ya.

#10

I’ve seen this being done, but I’m not entirely sure what it does.

#12

Reading this article should help. But if you have more questions please don’t hesitate to ask.

1 Like
#13

Ok I will read it! Thanks a lot for the help!

#14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.