Question

底部的导航栏是固定数量的像素。如何使chart1（红色背景）覆盖导航栏上方的所有内容。目前，它的高度为95％，但在较大的屏幕上，导航栏小于5％，在较小的屏幕上大于。谢谢您的帮助！

〜IGNORE〜由于大部分代码，它不会让我提交，所以我必须添加更多的文字... 由于大部分代码，它不会让我提交，所以我必须添加更多的文字... 由于大部分代码，它不会让我提交，所以我必须添加更多的文字... 由于大部分代码，它不会让我提交，所以我必须添加更多的文字... 由于大部分代码，它不会让我提交，所以我必须添加更多的文字... 由于大部分代码，它不会让我提交，所以我必须添加更多的文字... 〜IGNORE END〜

var bounds = new L.LatLngBounds(
        map.unproject([0, 145920], mapMaxZoom),
        map.unproject([145408, 0], mapMaxZoom));

#chart1 {
    background-color:red;
    /* Height and width fallback for older browsers. */
    height: 95%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 95vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
    
}

.sideButton {
    position: absolute !important;
    z-index: 10 !important;
    transform-origin: bottom left;
    transform:rotate(7deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari and Chrome */
            -o-transform:rotate(90deg); /* Opera */
}

Answer 1

您是否尝试过CSS calc()？

height: calc(100% - 5px)

Answer 2

这最终成功了：

html, body {
    height: 100%;
}
#chart1 {
    height: -webkit-calc(100% - 40px);
    height:    -moz-calc(100% - 40px);
    height:         calc(100% - 40px);
    width: 100%;

    /* Remove any browser-default margins. */
    margin: 0;

}

'html，body'部分至关重要，因为没有它，height变量就没有关于'100％'是什么的参考框架；您必须沿着父容器进行工作（主体的深度和我所需要的一样深，但是如果您的div更加嵌入式，则可能必须更深一些）。

如何使整个屏幕的div减去x像素

2 个答案: