Reputation: 3034

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

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?

Upvotes: 1

Answers (3)

Ram kumar

Reputation: 3162

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

Upvotes: 0

Guy

Reputation: 11315

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

Upvotes: 2

rico

Reputation: 11

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

Upvotes: 1

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

Answers (3)

Related Questions