How to make a div appear on a screen all the time, even when there is no content present in it

Question

I want to make a standard frame with two divs side by side.

.test {
  width: 100%;
  height: 100%;
}

.test22 {
  width: 100px;
  background-color: #000;
  border: 1px solid #000;
  height: 1000px;
}

<div class="test">
    <div class="test22">
    </div>
</div>

Here is a JSFiddle: https://jsfiddle.net/zvy0j3r1/

Now as you can see with a fixed height on 2nd div I'm able to see the container with black bgcolor on the screen. But I cannot have a fixed height as the content is variable and hence I changed: height:100% instead of fixed height.

When I do that, I don't see anything on the screen, except the border I added

JSFiddle: https://jsfiddle.net/zvy0j3r1/1/

If I add some content in it, it'll start showing up:

JSFiddle: https://jsfiddle.net/zvy0j3r1/2/

but I want to be able to see the black container always whether I have content or not with height: 100%?

Is this possible?

this question was asked so many times. Find out yourself https://stackoverflow.com/search?q=css+div+height — vnt, Oct 26 '18 at 21:14
You are required to post your markup and code here, not a jsfiddle. [mcve] A fiddle can compliment your example but not be used in its stead. — Rob, Oct 26 '18 at 21:42

Quentin Veron · Accepted Answer · 2018-10-26T21:35:34.703

0

height: 100% means that it will takes 100% of its parent's height.
In this case, the parent block is Body, which has no height defined, so it will be 100% of nothing.

First thing you have to do, is to define an height for both body and html tags.

html,
body {
  height: 100%;
  margin: 0;
}

Then, use min-height instead of height so the size will always fit its content.

.test22 {
  min-height: 100%;
}

html,
body {
  height: 100%;
}

.test {
  width: 100px;
  min-height: 100%;
  background: #000;
}

<div class="test">
   
</div>

edited Oct 26 '18 at 21:35

answered Oct 26 '18 at 21:14

Quentin Veron

3,079
1
14
32

I'm getting to work with the content inside the ```div```, what I'm trying to ask is is it possible to show the container always w/o having to enter any text, i.e if I remove the text entered inside ```test``` div, the ```div``` with just bgcolor wont show up, is there a way to show that – user1234 Oct 26 '18 at 21:34
See my update, w/o text. It's all about `min-height`'s value. – Quentin Veron Oct 26 '18 at 21:35

score 0 · Answer 2 · answered Oct 26 '18 at 21:16

You can use min-height:

.container {
  min-height: 60px;
  background-color: #e3dcff;
  border: 1px solid #000;
}

<div class="container">
  I have content
</div>


<div class="container">
<!-- no content -->
</div>


<div class="container">
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  I have very long content<br/>
  And I adapt my height
</div>

`min-height` doesn't work if you don't have an explicit height you want to set it to. In this case it should be however high the viewport is, e.g. dynamic. — TylerH, Oct 26 '18 at 21:57

How to make a div appear on a screen all the time, even when there is no content present in it

2 Answers2