Question

我有一个内容页面，高度设置为100％。这很有效。

现在，我想在顶部添加一个工具栏。但是，工具栏的高度为50px所以当它添加时，我会在页面上获得滚动条以占50px。

如何添加工具栏而不是滚动条？

我尝试将工具栏高度的填充设置为内容区域。这有效，直到工具栏改变大小。

例如，如果屏幕很窄，工具栏会相应更改。我需要能够确定此事件，然后相应地设置填充。

有办法做到这一点吗？还是另一种解决方法？

该页面是一个单页应用程序，它最好没有滚动条。

还有几个主题，有些主题有一个更大的工具栏，由CSS设置，可以在运行时更改。所以，我需要能够检测工具栏大小的变化。

Answer 1

这是我提出的打字稿。

constructor() {
        this.setContentHeight();
        $(window).resize(() => this.setContentHeight());
    }

    setContentHeight() {
        let headerFooterHeight = $("#navBar").height() + $("#entityShellFooter").height();
        let browserWindowHeight = $(window).height();
        let contentHeight = browserWindowHeight - headerFooterHeight;
        $("#entityShellContent").height(contentHeight);
    }

和HTML

    <header id="navBar">NavBar</header>

    <div id="entityShellContent">
            Content
    </div>

    <div id="entityShellFooter" >
        Status
    </div>

如何在NavBar高度更改时调整内容大小

1 个答案: