CSS - 在屏幕底部对齐div而不使用position：absolute

Question

我正在设计PhoneJS应用，我需要在屏幕底部放置一个按钮，但不使用position: absolute。

为什么我不使用绝对的？

由于这是PhoneJS应用程序，因此在将手机翻转为横向时会出现问题（请参阅下文）

这是肖像（按钮放置正确）

这是风景（按钮放错位置）

如何在不使用position: absolute css属性的情况下完成此类任务？

Answer 1

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

}

Media queries on CSS Tricks

Answer 2

尝试在此代码中使用@media标记作为css。

Answer 3

您可以在示例中使用这样的表方法。的 http://jsfiddle.net/2232cyrq/

为height:100%制作body and html，主包装将作为显示：底部内容的表格和表格单元格