Absolute Element Inheriting Relative Parent Div's Width

Absolute element inheriting relative parent div's width

Can't be done with position: absolute as far as I can see.

I'm not sure whether this will serve you, but how about giving the a position: relative and the a span

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

?

Relative parent DIV to inherit the width of absolute child DIV

The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.

Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.

As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.

height inherit not working with absolute position

To fix this, you need to correctly position the .stars div absolutely by positioning its parent div .main-content relatively. (Absolutely positioned elements need their parents to be relatively positioned otherwise they will be positioned absolutely to the body element). Then set the height of .main-content to 100vh (not 100%, because its parent body has no specified height) to take up the full height of the viewport (i.e screen).

1. Position the .main-content div relatively and height to 100vh. Now the .stars div can inherit this full height. Like so:

   .main-content {
       ...
       position: relative;  
       height: 100vh;
       ...
    } 
   

   Alternatively, set the height of the body element to 100vh first, then set the height of the .main-content div to 100% to inherit the full height of the viewport.

   body {
       height: 100vh;
   } 
   
   .main-content {
       ...
       position: relative;  
       height: 100%;
       ...
    }
   

2. Additionally, remove browser default paddings and margins and prevent overshooting widths and heights of elements on your page by setting the padding and margin properties of all elements to 0 and setting box-sizing: border-box property for all of them. Place this at the top of your CSS (This is good CSS practice).

   * {
       box-sizing: border-box;
       padding: 0;
       margin: 0;
   } 
   

Can I make my div inherit height and position from one div and width from another?

It's possible to force a div to fill the whole viewport width using vw. It's a bit weird though:

body,html {    margin: 0;    padding: 0;}
.outer {    width: 300px;    height: 300px;    background-color: #eeeeee;    margin: 0 auto;    position: relative}
.inner {    width: 100vw;    height: 100%;    background-color: rgba(0, 0, 0, 0.1);    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);}

<div class="outer">    <div class="inner"></div></div>

---

Related Topics