jquery - 如何让 child 100% 的屏幕

Question

我有这样的布局:

 <ul class="all-content white-bg">
    <row>
        <div class="col-md-3">
            <!-- Content -->
            <div class=" content white-bg fullscreen clearfix">
                <h3 class="cardTitle text-center">How-to: NAVBAR</h3>
                <div class="row">
                    <div class="col-md-6">
                        <iframe src="/nav_bar.htm">
                        </iframe>
                    </div>
                    <div class="col-md-6">
                        <figure>
                            <figcaption></figcaption>
                            <pre>
                                <code>
                                </code>
                            </pre>
                        </figure>
                    </div>
                </div>
            </div>

            <div class="card" id="1">
                <div class="card-front">
                    <div class="card-body">
                        <h5 class="card-title">NAVBAR</h5>
                        <p class="card-text"></p>
                        <button type="button"><a href="#">Go</a></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card" id="2">
                <div class="card-front">
                    <div class="card-body">
                        <h5 class="card-title">JUMBOTRON</h5>
                        <p class="card-text"></p>
                        <button type="button"><a href="#">Go</a></button>
                    </div>
                </div>
            </div>
        </div>

我有 24 张卡片。我想点击每个卡片并全屏显示带有类内容 white-bg 的 div。 我尝试了几件事，但似乎没有任何效果。我基本上制作了 24 个这些内容 div，但我现在只做一个用于测试。我用谷歌搜索并尝试了其他解决方案，例如绝对位置和相对位置的组合，尝试显示为表格，尝试最小宽度 100%，尝试 100% 的视口(viewport)，尝试将 div 移动到其他地方但似乎没有任何效果

Answer 1

尝试一下，我相信这应该有效:

.content.fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
}