Javascript 动态地将网页垂直地适配到浏览器中

我对这一切都比较陌生，上周一直在写一页。到目前为止，我发现这个网站非常有用，但我似乎无法让我的页面在垂直方向上完全动态地适应浏览器窗口。我想让它收缩元素，这样它就可以在没有垂直滚动条的情况下完全适合浏览器。原因很简单，它将是一个以移动应用程序为灵感的登录页，按下按钮，它将带你到你需要去的地方。但是，用户的屏幕大小/分辨率不同，因此页面必须流畅

我已经设法使页面根据浏览器的宽度进行收缩，如下所示（）

如您所见，所有元素都会根据浏览器的宽度动态收缩。但是，当在1024x768屏幕上查看时，浏览器会将底部一行“按钮”截去一半，用户必须滚动才能看到其余的按钮

我在这个网站上尝试了一些解决方案，但似乎无法让它发挥作用。这里有人能帮我让它动态调整到浏览器的宽度和高度吗

为了更好地说明我想要什么，这是我想要看到的效果

这张图片正好显示了我的问题所在

---

请注意，按钮之间的间距因间距百分比而缩小，但如果仅水平调整窗口，图像将缩小以适合。我需要它将整个内容压缩到浏览器窗口中。

要确保容器和子元素（如果需要）垂直填充屏幕，您需要确保对这些元素的总体父元素应用100%的高度值。在您的情况下，我将对您的css应用以下规则：

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

---

然后，这将使您的容器适应浏览器窗口100%的高度（因为容器是整个身体的子对象，是html标记的子对象）。但是，在应用了填充后，仍然可以看到垂直滚动条。因此，您需要确保减少容器元素相对于应用的填充/边距的高度%。在您的情况下，正如上面开清所建议的，您应该将容器高度更改为98%

没有看到它。我正在制作各种不同大小的演示窗口，没有任何东西被切断。你的HTML有问题。。。您有两个

标记，只有一个

标记。由您创建的保留打开的和由添加的。您不应该在JSFIDLE的HTML窗格中使用

标记。您也不需要在

body

标记中使用

onload=

事件处理程序，因为您可以用jQuery代替。高度100%加上填充1%1%将导致高度为102%。试着把这个高度提高到98%，这是一个很酷的水平框架scroll@Sparky，它仅在水平调整时调整大小。

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}