4 Replies Latest reply on Jul 28, 2015 6:44 AM by MurraySummers

    CSS VH

    pobarron

      Any thoughts or opinions on using VH property? I want to, but afraid that it won't work on everything.

        • 1. Re: CSS VH
          BenPleysier Adobe Community Professional & MVP

          The worst offender is IE which offers just partial support.

           

          But looking at the effects of using viewport units, the same effects (with the exclusion of fonts) can be made using percentages.

          • 2. Re: CSS VH
            pobarron Level 1

            IE I thought the same thing. I'm building an artsy website for an artsy, hip audience. I'm wondering if they even use IE. I don't want to be too presumptuous though.

            • 3. Re: CSS VH
              Jon Fritz II Adobe Community Professional & MVP

              I have to disagree with Ben on this one, vh and vw are a fair bit more flexible than percentages. A simple example off the top of my head would be creating a responsive square div...

               

              #my_div {

                   height:30vh;

                   width:30vh;

              }

               

              IE 9 through 11 and the new "Edge" browser from Microsoft shouldn't have any issue with vh and vw units and every other browser on the market sees them just fine. They're extremely handy in responsive design and as old browsers die off (ok, to be realistic, it's old versions of IE) I fully expect them to take over. vmin is also widely supported with two hold-outs on vmax (IE and Safari)

               

              Rather than setting something to be "a % width of a parent element" or "% height of a parent with a height setting" you can base your entire site off of the viewport width or height actually being used without having to resort to odd css hacks that cause more problems to pop up.

               

              Something you can do for those old browsers (if you really want to support them) is set % first in your css for a given selector, then vh or vw settings right after. The old browser will pick up the %, ignoring the v-unit since it has no idea what it is and merrily go about its business. A modern browser will pick up the v-units (being later in the cascade), giving you what you wanted in the first place.

              1 person found this helpful
              • 4. Re: CSS VH
                MurraySummers Level 8

                Thanks, Jon - those are good tips.