我希望这不会太令人困惑，但本质上这更像是一个代码破译的问题。
我希望我的网页目标网页的宽度和高度与用户打开该网页的任何浏览器的宽度和高度相同。我已经知道如何通过这段代码来做到这一点:
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 来启用？
最佳答案
您将需要百分比和绝对或固定定位，其中top或/和bottom和 left 和/或 right 值，不要使用 margin-top 或 margin-bottom 因为它们是根据窗口宽度计算的因此不会适应窗口高度。
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
( http://www.w3.org/TR/CSS2/box.html )
对于图像，您可以使用 max-height 和 max-width 以及 height:auto; 和 width 的百分比: auto; 所以它们永远不会溢出容器。
另一个问题是文本，特别是如果文本很大，因为您无法仅使用 css 使字体大小适应窗口的高度。您将需要 JS 来检索窗口高度并更改字体大小。
<强> JSFIDDLE 示例
关于html - 100% 宽度/100% 高度着陆页内的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22268453/