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，但我现在只做一个测试。我用Google搜索并尝试了其他解决方案，例如绝对和亲戚的位置组合，尝试显示为表格，尝试最小宽度100％，尝试100％的视口，尝试将div移动到其他地方，但似乎没有任何工作< / p>

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填满屏幕，无论位置如何。除了你正在使用的其他css被认为更重要之外，任何具有全屏类的div都会接受它。

如何让孩子100％的屏幕

2 个答案: