CSS - Выровнять div по нижнему краю экрана без использования position: absolute

Я разрабатываю приложение PhoneJS, и мне нужно разместить кнопку внизу экрана, но без использования position: absolute.

Почему бы мне просто не использовать абсолютное значение?

Поскольку это приложение PhoneJS, это вызывает проблемы при переворачивании телефона в альбомную ориентацию (см. ниже).

Это портрет (кнопка расположена правильно)

введите здесь описание изображения

Это пейзаж (кнопка не на месте)

введите здесь описание изображения

Как можно выполнить такую ​​задачу, не используя атрибут position: absolute css?


css css-position phonejs
person Detilium    schedule 28.08.2015    source источник
comment
Проблема не в позиции. Вам нужно сделать медиа-запрос, чтобы решить проблему ландшафта. Ваш единственный способ решить эту проблему - с абсолютной позицией...   -  person Marcos Pérez Gude    schedule 28.08.2015

Ответы (3)


arrow_upward
2
arrow_downward

У вас по-прежнему будет проблема с двумя кнопками и без пробела, независимо от position: absolute.

Я бы предложил использовать медиа-запрос для определения ландшафта и изменения стилей.

/* 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 */

}

Медиа-запросы к хитростям CSS

person Guy    schedule 28.08.2015
comment
Поскольку это PhoneJS, он кроссплатформенный. Будет ли это применимо к Android и Windows Phone? Разве нет способа сказать что-то вроде if width > height в css? - person Detilium; 28.08.2015
comment
Я не тестировал Windows Phone, так как у них незначительная доля рынка, но я думаю, что запрос orientation: landscape будет инициирован и там. Для телефонов Android потребуется настроить запросы pixel-ratio, width и height. Смотрите статью, на которую я ссылаюсь, для более подробного изучения. - person Guy; 28.08.2015
comment
Он поддерживается и в андроиде. Спасибо за ответ. Это работает отлично. В итоге я спроектировал их так, чтобы две кнопки не находились друг под другом, а были рядом друг с другом. Ценить это. - person Detilium; 28.08.2015

arrow_upward
1
arrow_downward

попробуйте использовать теги @media для css в этом коде.

person rico    schedule 28.08.2015

arrow_upward
0
arrow_downward

Вы можете использовать табличный метод, подобный этому, например. http://jsfiddle.net/2232cyrq/

сделайте height:100% для body and html, и основная оболочка будет отображаться как display: table и table-cell для нижнего содержимого

person Kumar    schedule 28.08.2015