Question

我目前在小屏幕上显示我的网站时遇到了问题，该网站正在适应浏览器的100％高度，但其中的内容并不适合该高度。这导致内容被切断。目前，可以在19英寸的屏幕上显示，但较低的屏幕会有问题。虽然手机可以完美显示。

该网站为http://emailblasting.epizy.com/index2.html

我已将我的容器div调整为100％的高度，但仍然无法使用。还是其中的内容需要设置宽度等？

Answer 1

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

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

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

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

这样，您将使页面和内容具有响应性，并适合不同的浏览器窗口。

Answer 2

嘿...我想这是因为您的容器的左边距和右边距

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

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

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

致谢

网站没有调整为窗口大小。网站截断为800px

2 个答案: