css - CSS - 在屏幕底部对齐 div 而不使用位置：绝对

Question

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

为什么我不只使用绝对？

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

这是纵向（按钮放置正确）

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

不使用position: absolutecss 属性如何完成这样的任务？

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

}

CSS Tricks 上的媒体查询

Answer 2

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

Answer 3

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

make height:100%forbody and html和 main wrapper 将作为 display: table 和 table-cell 用于底部内容