CSS Viewport issue: vh vs. 100%

Question

I code a responsive Website with HTML & CSS. I use the Bootstrapper framework.

My issue: when I use 100% for a background image, the image will not reach the end of the page on Desktop screens (because the image scaled with 100% height is smaller than the monitor resultion). On iPhone (Safari) it will look nice. The footer will be underneath the image.

When I use the Viewport-value 100vh the result on the Desktop Screen will look nice (Image will fill the background), but on mobile Devices (iPhone), the text will overlap the footer. Looks horrible.

I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?

HTML-Code:

        <section id="myid">

              <div class="myclass">

                <div class="container">

                    <div class="row">

                        <div class="col-md-8 opaline">

                            <div class="row">

                                <div class="col-md-10 col-md-offset-1">

								<p>Great Content</p>

								</div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        

        <footer>

           <div class="container">

                <div class="row">

                    <div class="col-md-10">

					

                        <p>Great Footer Content</p>

                    </div>

                </div>

            </div>

        </footer>

CSS: (OK-Result on Mobile Browser)

.myclass {

    /* The image used */

    background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    height: 100%;

    padding-top: 36px;

}

CSS: (OK-Result on Desktop Browsers)

.myclass {

    /* The image used */

    background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    height: 100vh;

    padding-top: 36px;

}

I also played with the calc function - with no success:

height: calc(100vh - 000px);

000 = height of the footer

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?

if thats what you looking for, you can use the - @media CSS at-rule -

The @media CSS at-rule can be used to apply styles based on the result of one or more media queries, in your case the screen size.

read more mdn doc

w3schools exemples are nice

edit : found something that might be relevant css-tricks

I applied what was on css-trick on the code you provided code

@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {

    .myclass {
        /* The image used */
        background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        padding-top: 36px;
    }
}

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
    .myclass {
        /* The image used */
        background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1));
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        padding-top: 36px;
    }

}

<section id="myid">
    <div class="myclass">
        <div class="container">
            <div class="row">
                <div class="col-md-8 opaline">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <p>Great Content</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-10">

                <p>Great Footer Content</p>
            </div>
        </div>
    </div>
</footer>

Edit -2- : from the answer you replayed :

Desktop Screen (1920x1200px resultion)

and in the code you posted you used

 @media only screen 
 and (min-device-width: 1000px) 
 and (max-device-width: 1600px)`

try to change the 'max device width' query value to the wanted resultion - 1920px (and up)

Edit -3- :

as you just replied in your solution, because the desktop view is the default one, removing the resolution pixel range completely from the desktop media query will might do the trick

CSS Viewport issue: vh vs. 100%

Sign up