如何做一个位置绝对和相对的网站，响应式

Question

我遇到了这个问题，我必须让网站响应，但是当我在不同的设备上查看网站时，高度看起来很糟糕。

基本上，无论屏幕高度大小为 85 像素，主要内容可以变化，页脚为 180 像素（因为里面我有 3 行，每行 60 行），我总是试图让我的页眉始终如此。

问题是我不希望网站有 Y 轴滚动，所以它必须完美契合（这就是为什么主要内容 div 可以改变大小）

我有这样的东西 https://codesandbox.io/s/late-frog-cou89 一些 Chrome 控制台上的测试手机看起来不错，但旧的真的很糟糕。

有没有办法让网站在每台设备上都max-height: 100%并且主要内容的大小取决于手机的屏幕大小phone ?这样用户无需向下滚动就可以看到所有页脚信息

Answer 1

您可以使用 height: calc(100vh - 85px - 180px); 作为您的主要内容元素。这适用于任何屏幕尺寸。

（= 全视口高度减去页眉和页脚的高度）

重要提示：如果您在这些元素中使用边框 and/or 填充，请确保为所有元素定义 box-sizing: border-box，例如使用通用选择器 (*)。这将包括计算中的边框和填充。

最后：您根本不需要相对和绝对定位 - 只需将所有 position 设置保留为默认设置，即擦除它们。

https://codesandbox.io/s/mystifying-perlman-rr4dx

Answer 2

首先使用flexbox。使用 vh（视图高度）作为宽度和高度，这将适应任何设备，但仅限于您的根元素。之后使用 %

.ui {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    width: 100vh;
}

.ui .header {
    height: 70px;
    width: 100%;
}

.ui .footer {
    height: 130px;
    width: 100%;
}

.ui .main {
    min-height: calc(100vh - 200px);
    width: 100%;
}

如何做一个位置绝对和相对的网站，响应式

How to make a position absolute & relative website, responsive

html

css

mobile

responsive