logo标签列表

将页面的高度设置为100%

htmlcssheight
9

我需要将除首页外的所有网页的主体内容放置在http://www.zorglegal.nl，使其高度相同（浏览器高度100%），从顶部到底部将右侧的棕色条拉伸至全屏。我应该如何最好地实现这一目标？

html{
    height: 100%;
}

body{
    min-height: 100%;
}

代码无法正常工作。我还尝试为内容元素设置类，并将其高度设置为100％，但仍未奏效。我该怎么做？

棕色条是png图像，并设置为全宽容器的背景图像。因此，如果该容器的高度为100％，则应该起作用。但是如何实现呢？

高度设为100%等于窗口大小，但当滚动条超过100%时，当前设置的效果是正常的，但您的需求不同。 - Help
可能是CSS Div stretch 100% page height的重复问题。 - Vucko
可能是重复的问题，参考如何使<body>元素高度铺满整个浏览器窗口? - Lalji Tadhani
可能是如何根据分辨率自动调整网站主体大小？的重复问题。 - Bilal Rafique
请不要引用您的网站。该链接可能会在明天失效或更改，对未来的任何人都没有帮助。您可以在此处插入图像。所有标记也应放置在此处：[mcve] 此外，您提到了“棕色条”，但我还没有看到它。 - Rob
5个回答
9
您可以使用视口高度。
height: 100vh

这意味着div或其他元素的高度与浏览器窗口一样高。
7
html, body{
    margin: 0;
    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

这个 CSS 可以帮助您在每个页面中设置高度为 100%。
0
尝试使用 JavaScript 实现：
$(window).bind('resize', yourclassname);

在你的类名中，同时使用你的ID，并将其赋给父级div。
0

您还可以在此处使用table属性，以获得跨浏览器的支持。

    html {
    width:100%;
    height: 100%;
    display: table;
    }

    body {
        width:100%;
        display:table-cell;
    }

    html, body {
        margin: 0px;
        padding: 0px;
    }
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接