100％高度和溢出与自举

Question

这更像是一个设计实践问题，而不是一个实际问题，但我试图通过以下布局在主要内容div上获得100％的高度。

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <!-- Content -->
                <div class="row">
                    <div class="col-xs-8">
                        <div class="main-container-wrapper">
                            <h1>Content</h1>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="right-container-wrapper">
                            <h3>Chat</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

这个代码就是这样，主容器包装器只有内容的高度（带有内容文本的h1）。我希望main-container-wrapper始终是视口的100％，并在内容溢出时可滚动。我发现在主内容包装器类上实现这个设置100vh有点hacky。因为它也导致boxy由于某种原因可滚动。

使用boostrap时，如果所有这些父div都有行和列等类，那么如何将div上的高度设置为100％。

一些指导意见将不胜感激。

Answer 1

我想你可能应该在你的css代码中添加这样的东西（参见下面的小提琴）

<TextBlock x:Key="ABC_Copyright" Background="Beige" Text="Copyright 2016 ABC Company" />

https://jsfiddle.net/smlrolland/2dtugmkm/