Question

我已经尝试了很长时间才能完成这项工作但却无法做到把它带到我需要的地方。由于使用了React，标记比标准引导程序模板稍微复杂一些：

<div id="root">
    <div class="app">
        <nav class="navbar">
            ...
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    sidebar
                </div>
                <div class="col">
                    main content
                </div>
            </div>
        </div>
    </div>
</div>

我正在尝试获取侧边栏列和主要内容列以填充屏幕。我得到的最接近的是它们的高度为100％，但这会使页面长度超过实际值。

任何想法都会很棒。谢谢！

更新我刚刚在一个纯html文件中完成了相同的设置并且它可以工作，它看起来像是在webpack / react中发生的事情

更新多一点研究，我对正在发生的事情有了进一步的了解。

因此，设置height: 100%和元素没有任何区别，#root是使用min-height: 100vh的全高，这是greate但是将height:100%添加到下面的任何内容都绝对没有

Answer 1

由于您使用的是React，问题可能是您使用的是class而不是className。

<div id="root">
    <div className="app">
        <nav className="navbar">
            ...
        </nav>
        <div className="container-fluid">
            <div className="row">
                <div className="col-md-3">
                    sidebar
                </div>
                <div className="col">
                    main content
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 4全高模板

1 个答案: