如何让孩子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% 的视口，尝试将div 移动到其他地方，但似乎没有任何效果

Answer 1

试试吧，我相信这应该有效：

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

Answer 2

在你的 css 中尝试：

div.fullscreen {
position: absolute;
width: 100%;
height: 100%;
}

这应该使div 填满屏幕，无论位置如何。任何具有类全屏的div 都会接受它，除非您正在使用的其他 css 被认为更重要。