Twenty sixteen - full height

Question

Twenty sixteen - full height

Supremelink

2016年4月29日 06:33

I want the twenty sixteen theme to "fill up" the height even if the page is empty. So.. If the content does not fill it up, it will be minimum full height.

Topic theme-twenty-sixteen child-theme theme-development Wordpress

Category Web

bravokeyl · Accepted Answer · 2016年4月29日 06:33

I don't know why you wanna do that, but..

We can use min-height with vh (view port height) unit for this. Setting height of the page to 100vh means we are saying the page to fill the full view port height.

.site {
   min-height: 100vh;
}

But this doesn't work well with iOS7. So work around is.

/** 
 * iPad with portrait orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
  .site {
    min-height: 1024px;
  }
}

/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
  .site {
    min-height: 768px;
  }
}

/**
 * iPhone 5
 * You can also target devices with aspect ratio.
 */
@media screen and (device-aspect-ratio: 40/71) {
  .site {
    min-height: 500px;
  }
}

References:

Can i use :

Work around by pburtchaell

Twenty sixteen - full height

About