Как сделать ребенка 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>
                                
                            

NavBar Go JumboTron Go

У меня 24 карты.Я хочу щелкнуть карточку для каждого и показать div с содержанием класса white-bg на весь экран.Я попробовал несколько вещей, и ничего не работает.Я сделал в основном 24 из этих div-ов контента, но сейчас делаю только один для тестирования.Я гуглил и пробовал другие решения, такие как сочетания абсолютного положения и родственников, пробовал отображать в виде таблицы, пробовал min-width 100%, пробовал 100% области просмотра, пробовал перемещать div в другое место, но, похоже, ничего не работает

Answer 1

В вашем css попробуйте:

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

Это должно заставить div заполнять экран независимо от позиции. Любой div с классом fullscreen возьмет это, если только вы не используете другой css, который считается более важным.

Answer 2

Попробуйте, я считаю, что это должно работать:

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