如何在 CSS 中使用 high:auto 阻止溢出？

Question

我使用layzilla 像this 一样制作了我的网站布局。

<div class="content">
    <div class="top_block header">
        <div class="content">
        </div>
    </div>
    <div class="background right-sidebar">
    </div>
    <div class="right_block right-sidebar">
        <div class="content">
        </div>
    </div>
    <div class="background middle-sidebar">
    </div>
    <div class="right_block middle-sidebar">
        <div class="content">
            <div class="top_block middle-sidebar-up">
                <div class="content">
                </div>
            </div>
        </div>
    </div>
    <div class="background left-sidebar">
    </div>
    <div class="right_block left-sidebar">
        <div class="content">
            <div class="bottom_block left-sidebar-down">
                <div class="content">
                </div>
            </div>
        </div>
    </div>
    <div class="background container">
    </div>
    <div class="center_block container">
        <div class="content">
        </div>
    </div>
</div>

除了侧边栏太长，效果很好。

我将它与 AngularJS 和 uiRouter 一起使用，例如 this。

侧边栏太长时不起作用，布局被破坏。

Answer 1

如何使用 css max-height:100vh; 这会将最大高度设置为视口高度的 100%。

像这样：

<div class="background left-sidebar" style="max-height:100vh">

如果这太多了，您可以改用 99vh。

另外，您是否考虑过使用 Bootstrap 来布局您的页面？