How do you vertically align an empty div inside a full-sized div?

Question

The big picture: I'm trying to make a bar graph consisting of discrete units. Each block will be a div. The bar will grow from bottom to top.

Details: I have a container div that contains all div divisions or blocks. For this, the container has a vertical bottom alignment.

Here's what it should look like: http://jsfiddle.net/hpf4h/1/

<div id="container"> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> #container { height: 100px; width: 10px; padding: 1px; background-color: #00f; display: table-cell; vertical-align: bottom; } .block { height: 10px; width: 10px; margin: 1px 0px 1px 0px; background-color: #0f0; } 

This works fine, but I need the container to be 100% high. This does this: http://jsfiddle.net/7n7ZH/1/

I would rather find a way to do this with CSS, preferably not too hacks. I already use jQuery for behavior in my project, so I could use this as a last resort.

Edit: In addition, all parent tags also have a height of 100%, including html and body.

Answer 1

Make the container container display:table container as follows: http://jsfiddle.net/7n7ZH/2/

When you use display:table-cell , the browser looks for ancestor elements that are display:table-row , display:table-row-group and display:table . If he cannot find them, he creates pseudo-elements that can stand behind them. What's going on here.

So, when you say display:table-cell; height:100% display:table-cell; height:100% , this is 100% of the created pseudo-element, which is display:table . But this pseudo-element is only as high as its contents, and there is no point in CSS saying "make the pseudo-element 100% higher than its height."

But it is possible to have a real display:table element and set its height to 100%, in which case the browser will use this and not create a display:table pseudo-element.

Answer 2

Application display:table-cell; and height at the same time rarely gives the expected results. I see that you are trying to use vertical-align , so you probably added a table-cell . Instead, try css positioning:

Remove display:table-cell; and vertical-align from your container.

Add height:100%; into body and html elements so that your container has room for growth.

Set the container to position:relative; , which will make it the source of all placed child elements, and not the document root (body tag). This will allow you to move the container around without twisting the child positions.

Add a wrapper around your blocks (you can use ul, li for this, not div).

Place the block container as position:absolute; bottom:0; position:absolute; bottom:0;

Here is the code ...

 #container { height: 100%; width: 10px; padding: 1px; background-color: #00f; position:relative; } .blockContainer { position:absolute; bottom:0px; } .block { height: 10px; width: 10px; margin: 1px 0px 1px 0px; background-color: #0f0; } body { height:100% } html { height: 100%}#container { height: 100%; width: 10px; padding: 1px; background-color: #00f; position:relative; } .blockContainer { position:absolute; bottom:0px; } .block { height: 10px; width: 10px; margin: 1px 0px 1px 0px; background-color: #0f0; } body { height:100% } html { height: 100%} 

... and here is the violin ...

http://jsfiddle.net/kPEnL/1/

Answer 3

I can’t help you do it the way you started, but taking the original overall picture of trying to make vertical progress, here is an alternative that uses the progressbar on Twitter Bootstrap . In its existing form, it does not execute vertical progress indicators, but this modification does.

I initially suggested using stacked columns, but this does not work with vertical implementation. Instead, I have a solution that uses CSS gradients to draw blocks, but still uses a normal bootstrap progress bar.

 .progress.discrete { background-image: linear-gradient(0deg, black 0%, green 5%, green 95%, black 100%); background-size: 100% 10%; background-repeat: repeat-y; } /* Bar is used to cover up the blocks, so make it look like a background */ .progress.discrete .bar { background-image: linear-gradient(to right, #f5f5f5, #f9f9f9); } 

I suggested that you want your blocks to be a percentage of the height of the bar, and not the absolute size - this means that I can not apply the gradient to the panel. Instead, it can be applied to the background, and the panel used to overlap it (i.e. set the bandwidth to 100-progress%). I also included an example that uses a fixed block size applied to a panel, if that is what you wanted.

http://jsfiddle.net/BHTXZ/3/

He needs to clean up a bit, but does the trick.