Geek Answers Handbook

Why the percentage height is not shown on the display: table-cell?

I am trying to center both horizontally and vertically a div inside an outer div. It works when the outer div has a specific width and height set in pixels, for example

#countdownBox { width: 700px; height: 500px; display: table-cell; vertical-align: middle; text-align: center; }

but it fails when the height and width are percentages, for example

 #countdownBox { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; }

Why is this work?

EDIT Here is the HTML with the CSS container:

 #countdownBoxContainer { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 3; } <div id="countdownBoxContainer"> <div id="countdownBox"> <div> hi there </div> </div> </div>
+7
source share
1 answer

Based on the fact that you have a width and height of 100%, I assume that you do not expect that someone will have to scroll here. Check out this script where I have a working solution based on these parameters.

Remember that display: table-cell; acts exactly like the <td> elements, and they will not display correctly if they are not in the <table> (or in the container display: table; ).

Another problem is that <html> and <body> not necessarily the height of the screen if the content is very small. html, body { height: 100%; } html, body { height: 100%; } fixes it, but a bit hacked.

+2
source

More articles:


All Articles