Question

我对所有这些都比较新，并且上周一直在处理一个页面。到目前为止，我发现这个网站非常有用，但我似乎无法让我的页面完全动态地完全适合浏览器窗口。我希望它缩小元素，使它在没有垂直滚动条的情况下适合浏览器。原因很简单，它将是一个移动应用程序启发的登陆页面，按下按钮，它将带你到你需要去的地方。但是，用户将具有不同的屏幕尺寸/分辨率，因此页面必须是流畅的。

我已设法根据浏览器的宽度缩小页面，如此处所示（jsFiddle Demo）。

 container {
    padding: 1% 1%;
    width: 80%;
    height: 100%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    /*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

如您所见，所有元素都会根据浏览器的宽度动态缩小。但是，当在1024x768的屏幕上观看时，浏览器的底部“按钮”排除了一半，用户必须滚动查看其余部分。

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

为了更好地说明我想要的内容，这是我希望看到dynamic resizing example

的效果

这是一张图片，可准确显示我的问题Difference in Resolution http://img404.imageshack.us/img404/5840/resolutionissue.jpg

请注意，由于百分比间距，按钮之间的间距会缩小，但如果仅水平调整窗口，图像将缩小以适合。我需要它将整个东西挤进浏览器窗口。

Answer 1

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

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

这将使您的容器适应浏览器窗口的100％高度（因为容器是整个身体的子项，它是html标记的子项）。但是，当您应用填充时，您仍会看到垂直滚动条。因此，您需要确保相对于应用的填充/边距减小容器元素的高度％。在您的情况下，凯青建议您将容器高度改为98％。

动态地将网页垂直放入浏览器中

1 个答案: