Child div not filling parent

Question

I know this title is probably about the most common on SO, but I seem to have a very specific problem that I can't find documented.

I have a div that I want to be exactly square, so I followed the CSS advice in this answer. I also want a child div to fill this space, so I've followed all the standard guidelines of having a clear:both div in a wrapper, etc, but my child div is still not filling its parent. The problem is the height: 0 of the parent div - is there a solution to this but still maintaining the exact square (preferably pure CSS, I'm aware there are JS solutions). Example of this is at this fiddle.

score 8 · Accepted Answer · answered Jun 24 '15 at 11:28

8

You can give the inner box an absolute position and set it to conform to the edges of the containing box:

.box div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid black;
    display: block;
    background-color: rgba(0,0,0,0.1);
}

jsfiddle

Not sure if it's any better to what you proposed, maybe if you wanted content in the box?

answered Jun 24 '15 at 11:28

gaynorvader

2,619
3
18
32

Thanks! This seems like a pretty robust approach. I'll do some experimenting and see which result seems better :) – ChrisW Jun 24 '15 at 11:44
1

As you say, this does work better when I want more content. The simplistic way I came up with breaks when there's more content, because of the effect of padding on the content in the child div – ChrisW Jun 24 '15 at 12:08

score 2 · Answer 2 · answered Jun 24 '15 at 11:50

If you're not too worried about support then using vh, vw, or vmin would be a good alternative. Since height would actually be set you could easily set the child element to fill the parent.

CSS:

.parent {
  width: 50vmin;
  height: 50vmin;
  background-color: blue;
  margin: 0 auto;
}

.child {
  width: 100%;
  height: 100%;
  background-color: red;
}

HTML:

<div class='parent'>
  <div class='child'></div>
</div>

Here's an example. I like vmax, but it's not as well supported as vmin, vh, and vw.

score 1 · Answer 3 · answered Jun 24 '15 at 11:40

1

This padding trick for responsive boxes work with absolute positioning.

css-padding-trick-responsive-intrinsic-ratios

So use absolute positioning for inner div.

.box {
 ...
  position: relative;
}

.box div {
  ...
   position: absolute;
   left: 0;
   top: 0;
}

answered Jun 24 '15 at 11:40

Felix A J

6,300
2
27
46

Is this different to the [very good answer](http://stackoverflow.com/a/31025326/889604) posted below? – ChrisW Jun 24 '15 at 11:42
didnt noticed. anyway `right: 0; bottom: 0;` is not required as mentioned. height:100% will work – Felix A J Jun 24 '15 at 11:55

ChrisW · Answer 4 · 2015-06-24T11:37:16.377

0

Adding padding-bottom: 100% to the child div does fill the space and seems to be a fix; the updated jsfiddle reflects this

edited Jun 24 '15 at 11:37

answered Jun 24 '15 at 11:21

ChrisW

4,970
7
55
92

I won't accept this answer yet in case there are better alternatives or this is shown to be a bad method! – ChrisW Jun 24 '15 at 11:22
while you linked the answer in your question you should not write answer yourself. – Bhojendra Rauniyar Jun 24 '15 at 11:22
Why does your .box div have 0 height? That's the real problem. – Christian Lundahl Jun 24 '15 at 11:23
@Perplexor that's how the perfect square is maintained – ChrisW Jun 24 '15 at 11:23
@BhojendraNepal it is perfectly fine to [answer your own question](http://stackoverflow.com/help/self-answer) – ChrisW Jun 24 '15 at 11:25
NO. The linked answer and your answer is same. So, delete it. – Bhojendra Rauniyar Jun 24 '15 at 11:27
No, you get a square div by setting it's height to the same value as it's width. Why complicate things with 0 height and a lot of padding? – Christian Lundahl Jun 24 '15 at 11:28
@BhojendraNepal sorry, I'm confused, *which* linked answer? – ChrisW Jun 24 '15 at 11:31
@Perplexor because he wants the square to be dynamic, the only alternative I can think of would be to use js. – gaynorvader Jun 24 '15 at 11:31
@Perplexor - that works if you have a fixed size square, not a responsive square :) – ChrisW Jun 24 '15 at 11:31
2

Then maybe using viewport units would be better? `height: 38vw; width: 38vw;` – Christian Lundahl Jun 24 '15 at 11:33
@ChrisW You linked the answer in your question. – Bhojendra Rauniyar Jun 24 '15 at 11:35
@Perplexor that's a very good solution so long as support for IE 9 and below is not an issue. – gaynorvader Jun 24 '15 at 11:37
@Perplexor ah, I hadn't realised viewport units could be used like this! – ChrisW Jun 24 '15 at 11:38
@BhojendraNepal as far as I can see, there's nothing in the answer I linked to that explains the answer to the question I asked - can you explain what you mean? :) – ChrisW Jun 24 '15 at 11:40

Child div not filling parent

4 Answers4