CODEWITHSUNDEEP
css
Arthur B.
Arthur B.

Reputation: 3595

Inside div fits the screen but not the outer div

I would like to fit a div to match an outer div but, for some reason, my inner div only expands to the browser window's height.

See https://jsfiddle.net/xhv7skyd/

<body>
  <div id="outter">
    <div id="inner">

    </div>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    ....
    All work and no play make jack a dull boy<br/>
  </div>
</body>

and the css

#outer {
  background: rgb(200, 100, 50);
  display: table;
  height: 100%;
  min-height: 100%;
  width: 100%;  
}

#inner {
  position: absolute;
  border-style: solid;
  border-color: rgb(0,200,0);  
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

If you need to scroll to see the entire text, then the inner div's height will be less than the outer div's.

I'm trying to adapt something to an existing template, so I don't want to modify the outer div's style, just the inner div. What can I do?

Upvotes: 0

Views: 22

Answers (1)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use position: relative; on #outter. Have a look at the updated Fiddle, or look at the snippet below:

#outter {
  background: rgb(200, 100, 50);
  display: table;
  height: 100%;
  min-height: 100%;
  width: 100%;
  position: relative;
}

#inner {
  position: absolute;
  border-style: solid;
  border-color: rgb(0,200,0);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<body>
  <div id="outter">
    <div id="inner">
      
    </div>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
    All work and no play make jack a dull boy<br/>
  </div>
</body>

Hope this helps!

Upvotes: 1

Related Questions