How to take the height of the screen?

How to take the height of the screen?
0

#1

I just finished with my wikipedia viewer page and I want to make it responsive also for the height. Who I could do that? because it looks silly before searching


#2

Hi,

you can apply this rule to your element.

height: 100vh;

thats 100% of viewport height.

or use min-height, if you expect your content could overflow vertically within that element.


#3

thank you very much!


#4

Did you noticed anything else that you didn’t like?


#5

Hi, I wouldn’t say stuff i don’t like but maybe a couple of tips for you?

  • You can ditch these rules as you have applied similar to the container fluid:

    html, body {
    min-width: 100%;
    min-height: 100%;
    }

  • It’s bad practice to style with *, instead you can apply your styles to your body.

  • You might see where the min-height i mentioned comes into play if you try a search. by using min-height we’re allowing the element to grow vertically if it needs to yet load initially with a full screen height.

Hope that helps :slight_smile:

Mark

3rd point corrected: min height, not width.


#6

first of all, thank you for your time. I think I will follow your instructors.

The problem with the result unfortunately was because of the height: 100vh; now that I replaced it with min-height: 100% it’s ok but I have the some problem that I had at the beginning. Actually I would like to move the all the footer in the bottom of my page


#7

No probs,

i think you need to look at sticky footer :slight_smile:

there may be better / more apt solutions waiting on google but this is a site that I and many others trust.


#8

Hey, first off you don’t need min-width in .container-fluid, the width already takes up 100%. Second, your footer is not properly done.

height: 100vh;

is the correct way as previously mentioned to make the container full height. Your footer will not be at the bottom, because you 1. have it in the container you want it after 2. you are positioning it down by line breaks (bad idea). You can move it to the bottom with absolute or fixed positioning, and make your container full height. Some good info on sticky footer:

The calc one or flexbox should do the full height like you wanted.


#9

Thank you both. I am trying to do something but I think I am making it worst. :slight_smile:


#10

Nah you wont,

take your time, seperate your sections in HTML so you can read it easier (theres a tidy html button you can try in the arrow drop down) and make sure your divs and other elements are nested as if you were placing a paper model of your website and you’ll nail it.