How can I ensure that a div without content will get the height of the parent div?

Question

i am trying to create to divs width the outer container set to 1000px and the inner left and right container to 50% each. Now i have used this code

.leftNav {
    @include span-columns( 5 of 10);
    background-color:silver;
    color:white;
}

.rightNav {
    @include span-columns( 5 of 10);
    background-color:silver;
    color:white;
}

Now somehow if i don't put anything on left nav the right nav takes full 100% width. How can i set the leftnav or rightnav to maintain at least 50% width even if they are empty? thanks.

score 4 · Answer 1 · answered Oct 27 '14 at 12:07

4

This "issue" doesn't come from Neat, but from CSS itself. To be shown, an empty element require to have a height.You can use one of the following tricks:

Put   in your div
Set a height on your div
Set a padding on your div

Here's another trick I like, if you're not using the :after pseudo-element on these div:

.leftNav:after,
.rightNav:after {
    content: '.'; // dot will force its parent to have a height
    opacity: 0;   // dot is hidden
}

answered Oct 27 '14 at 12:07

zessx

68,042
28
135
158

1

The ` ` did the trick for me. I wanted an empty div to be the same height as when it wasn't empty. – John Carrell Jul 19 '19 at 14:02

score 1 · Answer 2 · answered Oct 27 '14 at 12:29

You could use css tables.

Setting display:table-cell on both the left and right divs will ensure that each one gets equal height (ie the height of the greater of the two)

FIDDLE

.container {
  width: 100%;
  display: table;
}
.left {
  width: 50%;
  display: table-cell;
  background: silver;
}
.right {
  width: 50%;
  display: table-cell;
  background: tomato;
}

<div class="container">
  <div class="left"></div>
  <div class="right">some text</div>
</div>

score 0 · Answer 3 · answered Nov 07 '18 at 22:00

0

You can also do:

.leftNav:after,
.rightNav:after {
  content: '';
  display: inline-block;
}

Then you don't have to deal with any dots which could be confusing to someone else looking at your code.

answered Nov 07 '18 at 22:00

Jordan

148
1
11

How can I ensure that a div without content will get the height of the parent div?

3 Answers3