CSS GRID FULLSCREEN

Question

CSS GRID FULLSCREEN

Navigation

#1 by (0 votes)

0

My question is about how to create an area with css grid layout that occupies the whole screen, that is, as if it gave you a height:100vh , and a width:100vw .

I am trying to give the number of ROWS to a slider so that it occupies just the screen to me, but in the specification of css grid layout I do not find anything specific (it is worth the redundancy). Nor creating a grid area of 100vh, since I guess that grid-areas do not have these values as default.

The only thing I get is to give some values to the container, but it is not adaptable, since it is not the measure in screen proportions, but in columns and rows. Any idea how it could be done or if there is still no value in this regard?

css

asked by joaquin delgado 19.12.2017 в 18:29

source

1 answer

What is the solution to all present, past and future NullPointerException errors? Problems with the css of a href in menu Bootstrap

score 0 · Answer 1

I do not know if it's exactly what you're trying to do, but if you try to make a bootstrap slider that takes up the full screen and is responsive to all the screens, I'll leave you a code that I have done to see if it works:

HTML code

        <div class="slidertv">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause="false">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="assets/rsc/publicidadtv/slider1.jpg" alt="...">
                </div>
                <div class="item">
                  <img src="assets/rsc/publicidadtv/slider2.jpg" alt="...">
                </div>
                <div class="item">
                  <img src="assets/rsc/publicidadtv/slider3.jpg" alt="...">
                </div>
              </div>
            </div>
        </div>

CSS Code

.slidertv .item {
    height: 100vh;
}
.slidertv .carousel-inner {
    height: 100vh;
}
.slidertv img {
    height: 100vh !important;
    width: 100%;
}

I do not know if I copied all the necessary code, in case it does not work for you, you tell me and I look at it.

Greetings and I hope it serves you.