Question

我知道如何确保HTML主体垂直拉伸/缩小到浏览器视口的100％高度（通过在主体和html规则中具有100％高度）。

我也知道普通的HTML流会导致容器垂直拉伸以包含其内容（如果设置正确的话）。

然而，我似乎无法实现这两者。

即。我不能打败CSS以确保当我的页面在高分辨率屏幕上被观看时它垂直拉伸以留下没有间隙并且确保如果我的页面在较低分辨率的屏幕上观看，则身体伸展通过视口（以容纳所有内容）并介绍滚动条。

对我来说这是理想的行为，但我遗憾地认为这不能仅仅在CSS中实现。我知道我可以很容易地在JavaScript中执行此操作，但我希望能够在CSS中执行此操作。

是否可能，或者我被迫使用JavaScript？

修改：我已经研究，尝试和测试了这么多技术，但它似乎无法完成。看起来我将不得不回到JavaScript。

Answer 1

好的，这对我来说绝对有用：

html {
   height: 100%;
}

body {
   min-height: 100%;
   display: flex;
}

#wrapper {
   width: 100%; /* Necessary because of side-effect of flex */
   height: 100%;
}

正是我以前尝试过的，但我想我会给这个新的CSS功能“flex”一个去，它已经完成了这个伎俩。因此，看起来CSS管理者/创作者终于通过动态高度和垂直居中来解决这些关键问题。

我希望这有助于其他人坚持这个问题。

Answer 2

您可以使用min-height css属性。

html, body {
  min-height: 100%;
}

Answer 3

min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/

Answer 4

从一个似乎与我的问题基本相同的问题中获取灵感：Make body have 100% of the browser height

这对我有用：

html {
  height: 100%;
}
body {
  min-height: 100%;
}

CSS body 100％高度并在必要时溢出

4 个答案: