Question

我有一个问题，我在容器中填充了页眉，主目录和页脚。例如，对于桌面用户，在首页上，页眉应为可用浏览器高度的12％，主标题应为88％（没有浏览器工具栏和Windows / android / ios / linux栏），页脚应仅在用户滚动页面时可见

我考虑了以下解决方案：

header {
    height: 12vh;
}

main { 
    height: 88vh;
}

但是当用户调整浏览器高度时，标头和main不应调整大小。

let root = document.documentElement;

root.style.setProperty("--deviceHeight",
    window.screen.availHeight - (window.outerHeight - window.innerHeight) + "px");

但是当用户更改浏览器高度并刷新页面时---deviceHeight会再次计算。

我也尝试过：

root.style.setProperty("--deviceHeight", window.screen.availHeight)

但随后chrome，opera和其他浏览器的输出却不同。

总而言之-我想在没有窗口和浏览器栏的情况下获得最大可用高度，并将标题和主标题的大小调整为该高度，因此标题高度+主高度将是最大可用浏览器（内部）高度的100％，但是当用户在桌面上调整浏览器大小->标头和主要高度不应更改。

在没有多个媒体查询的CSS中这是否可能？如果不是，这可能在javascript / js + jquery中吗？或者也许我应该使用多个jquery（例如媒体查询中的10次迭代）

:root {
    --deviceHeight: 299px
}
@media only screen and (min-width 300px) {
    :root {
      --deviceHeight = 300px
    }
}
@media only screen and (min-width: 301px) {
    :root {
        --deviceHeight = 302px;
    }
}
etc.

我正在寻找前端编程和SEO的最佳解决方案，即使复杂，任何建议也都很棒！

Answer 1

您说过，当浏览器的高度改变时，标题的大小也不应改变，因此您可以使用固定的单位并为mainf内容计算其余部分：

header {
    height: 300px; // for exemple
}

main { 
    height: calc( 100vh - 300px ); // calculate the available space
}

Answer 2

我找到了一个解决方案，虽然不是我想要的，但它与我想要的最接近。

header {
    height: 160px;
}

@media only screen and (max-height: 599px) {
    main {
        height: calc(599px - 160px);
    }
}

@media only screen and (min-height: 600px) {
    main {
        height: calc(100vh - 160px);
    }
}

在没有浏览器工具栏的情况下获取最大可用浏览器高度-javascript

2 个答案: