Question

我希望这不会太混乱，但实质上它更像是一个代码解密的问题。

我希望我的网页登录页面是用户打开它的任何浏览器的100％宽度和100％高度。我已经知道如何通过以下代码执行此操作：

HTML：

<body>
<div class="wrapper"></div>
</body>

CSS：

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

.wrapper{
    width: 100%;
    height: 100%;
    background: #101010;
}

但是，当我开始在包装器类中添加元素，并从底部向上调整浏览器的大小时，其中一些元素会从主包装器中删除，并位于下一部分的下方。

我的问题是，如果你想设计一个包含元素的着陆页，它总是100％宽度和浏览器的100％高度 - 元素总是保留在那个包装器中 - 这可能只通过CSS ？是否需要使用百分比而不是像素表示来定位元素，或者这需要JavaScript来启用它吗？

Answer 1

您需要使用absolute或/和fixed以及top和/或bottom值的百分比和left或right定位，不要使用margin-top或margin-bottom，因为它们是根据窗口宽度计算的，因此无法适应窗口高度。

百分比是根据宽度计算的生成的框包含块。请注意，这是真的 'margin-top'和'margin-bottom'也是如此。

（http://www.w3.org/TR/CSS2/box.html）

对于图片，您可以max-height和max-width使用height:auto;和width:auto;的百分比，这样他们就不会溢出容器。

另一个问题将是文本，特别是如果它是巨大的，因为你将无法使用css将字体大小调整到窗口的高度。您将需要JS来检索窗口高度并更改字体大小。

JSFIDDLE 示例

Answer 2

除了chadocat提到的内容之外，您可能还需要设置视口元标记，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这定义视口的宽度将与您在网站上查看的设备相同。网站的规模将设置为100％。

而不是百分比和视口，CSS3可以通过vw和vh单位设置元素宽度和高度，例如

width: 50vw;

会将元素的宽度设置为视口的50％。

100％宽度/ 100％高度着陆页内的元素

2 个答案: