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

【问题标题】：CSS - Align div in bottom of screen without using position: absoluteCSS - 在屏幕底部对齐 div 而不使用位置：绝对
【发布时间】：2015-08-28 11:56:28
【问题描述】：

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

我为什么不直接使用绝对值？

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

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

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

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

【问题讨论】：

问题不在于位置。您需要进行媒体查询来解决景观问题。解决此问题的唯一方法是使用绝对位置...

标签： css css-position phonejs

【解决方案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

【讨论】：

因为这是一个PhoneJS，它是跨平台的。这是否也适用于 Android 和 Windows Phone？没有办法在 css 中说类似 if width > height 的东西吗？
我没有在 windows phone 上测试过，因为它们的市场份额很小，但我认为orientation: landscape 查询也会在那里触发。对于 Android 手机，需要调整 pixel-ratio、width 和 height 查询。请参阅我链接到的文章以获得更深入的了解。
安卓也支持。谢谢你的回答。它完美地工作。我最终设计了它们，使两个按钮不在彼此下方，而是彼此相邻。欣赏它。

【解决方案2】：

尝试在这段代码中使用 @media 标签作为 css。

【讨论】：

【解决方案3】：

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

为body and html 制作height:100%，主包装器将作为显示：table 和 table-cell 用于底部内容

【讨论】：