CODEWITHSUNDEEP
javascripthtmlcsswindowheight
Eric ERK
Eric ERK

Reputation: 369

On Height CSS responsive-ness

I'm trying to emulate this site.

https://elrumordelaluz.github.io/csshake/

Each Color is a different section, and all sections are based on the height of the screen. Is there anyway to implement this w/ out just copying the demo.css? Just want a simple bare bones implementation of what is going on.

Upvotes: 0

Views: 57

Answers (3)

Yoni Mor
Yoni Mor

Reputation: 354

I believe using percentages instead of vh is better, because of older browser support:

http://codepen.io/yonimor/pen/MKoGBj

<div class="first"></div>
<div class="second"></div>

html, body {
  height: 100%;
}

.first {
  height: 100%;
  background: red;
}

.second {
  height: 100%;
  background: yellow;
}

Upvotes: 0

Rogier Wijnands
Rogier Wijnands

Reputation: 129

If you want the exact height of the screen that somebody is looking at, you can use 'vh' in the CSS property 'height', which means View Height. Then if you want each section to have a different colour, you'll want to add a different class or id to each section so that you can add code in the CSS specifically for each section. You also want to add 'width:100%' to both the 'body' and each 'div' so that it uses the full width of the browser.

Let's say you have 3 sections that each need different colours, it would look something like this:

#example-div1 {
  height:100vh;
  width:100%;
  background-color:#fff;
}

#example-div2 {
  height:100vh;
  width:100%;    
  background-color:#555;
}

#example-div3 {
  height:100vh;
  width:100%;  
  background-color:#111; 
}

Upvotes: 2

Pierre-Loup Pagniez
Pierre-Loup Pagniez

Reputation: 3761

Does this do the job for you? https://jsfiddle.net/0ds7fLce/ The vh unit is part of the CSS3 specification, it represents a percentage of the height of your viewport.

.myclass {
    height: 100vh;
}

Should do the trick.

Upvotes: 2

Related Questions