html - Nested 100% heights -


i'm working on mobile site has structure looks this:

body ---->mobile container div (height 100%) -------->full page div (height 100%) ------------>vertically centered div (height 200px) 

my problem full page div level comes out 0px. here's relevant css:

html, body {     height: 100%;     margin: 0; }  .mobile {     min-height: 100%; }  .full-page {     height: 100%;     position: relative; }  .center {     height: 200px;     top: 50%;     margin-top: -100px;     position: absolute; } 

the mobile container filling window height, full page (100% of height of mobile container) being rendered @ 0px height, ruins vertical centering.

why happening?


jsfiddle

  • the red div mobile container
  • the yellow div full page div (it's not visible because it's 0px tall)
  • the green div vertically centered div

this happening because of following rule:

.mobile {    min-height: 100%; } 

here's why.

css specs tell following percentage height:

the percentage calculated respect height of generated box's containing block. if height of containing block not specified explicitly (i.e., depends on content height), , element not absolutely positioned, value computes auto. percentage height on root element relative initial containing block.

this applies .fullpage container. can see parent container of .fullpage, .mobile, not have height set explicitly, rather via min-height property:

the min-height property used set minimum height of given element. prevents used value of height property becoming smaller value specified min-height.

you think child container, .fullpage take min-height property consideration when determining height, not. browsers not set child element’s height (specified in percent) based on parent’s computed height if min-height used.

to correct this, add height: 100% to:

.mobile {    min-height: 100%; } 

Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -