站点未调整到窗口大小。网站在 800px 处被截断答案

【问题标题】：Site is not resizing to window size. Site cut off at 800px站点未调整到窗口大小。网站在 800px 处被截断
【发布时间】：2019-10-01 02:56:16
【问题描述】：

我目前在小屏幕显示我的网站时遇到问题，该网站正在适应浏览器的 100% 高度，但其中的内容不适应该高度。它导致内容被切断。目前在19寸的屏幕上显示是可以的，更低的会出现问题。而手机完美显示。

网站是http://emailblasting.epizy.com/index2.html

我已将容器 div 调整为 100% 高度，但它仍然被切断。还是里面的内容我需要设置宽度之类的？

【问题讨论】：

欢迎来到 Stack Overflow！请将您的 HTML 和 CSS 发布到问题中。如果该 URL 发生变化，这个问题对于未来的访问者将变得毫无用处。请阅读：How to create a Minimal, Complete, and Verifiable example
从正文和 html 中删除高度：100%，自动获取高度或使用 sn-p 将代码粘贴到某些在线编辑器中
问题是我想让它成为一页，没有滚动条。如果我删除高度，它将使其可滚动
好的，请在此处添加使用 sn-p 的示例代码，以便任何人都可以看到，您可以使用此处的内置编辑器或 jsfiddle。
jsfiddle.net/5jyx61m0 这是链接

标签： html css

【解决方案1】：

正如我所见，您正在使用媒体查询（@media 规则），请避免以像素为单位设置外部容器的宽度和高度，并选择响应式值。例如；

html, body, .container {
    width: auto;
    max-width: 100%;
    height: 100%;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

然后，您可以在必要时使用边距或填充（或作为最终结果的像素宽度）控制各个内部容器的布局。

这样您的页面和内容就会响应并适合不同的浏览器窗口。

【讨论】：

【解决方案2】：

嘿...我猜这是因为你的容器有 margin-left 和 margin-right

    .container {
    display: block;
    max-width: 600px;
    width: 100%;
    height: 100%;
    max-height: 800px;
    margin: 0 auto;
    overflow: hidden;
}

此处边距：0 自动.. 那个“自动”部分正在为您制造问题.. 试着检查一下，我想它对你有用..

您可以将高度设置为 100% 的 100vh... 它不会使您的页面可滚动

问候

【讨论】：