CSS - Align div in bottom of screen without using position: absolute

Question

I'm designing a PhoneJS app, and I need to have a button placed in the bottom of the screen, but without using position: absolute.

Why don't I just use absolute?

As this is a PhoneJS application, this causes problems when flipping the phone to landscape (refer below)

This is portrait (button placed correctly)

This is landscape (button misplaced)

How can one accomplish such task without using the position: absolute css attribute?

Answer 1

You will still have the issue of two buttons and no space regardless of position: absolute.

I would suggest using a media query to target landscape and change the styles.

/* iPhone Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

  /* Styles go here */

}

Media queries on CSS Tricks

Answer 2

try to use the @media tags for css in this code.

Answer 3

You can use table method like this in example. http://jsfiddle.net/2232cyrq/

make height:100% for body and html and main wrapper will stand as display: table and table-cell for bottom content