CSS

Question

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

为什么我不用绝对值？

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

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

这是横向（按钮放错了）

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

Answer 1

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

Answer 2

无论position: absolute如何，您仍然会遇到两个按钮和没有space的问题。

我建议使用媒体查询来定位横向并更改样式。

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

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

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

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

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

css-position

phonejs