Geek Answers Handbook

CSS 100% Width

Is it even possible to make my width 100% height using only CSS? Without using Javascript or the like.

{ width: /*100% of height*/ }
+7
css
source share
2 answers

There are new css units for this.

 width: 100vh;

This means that the width of the element will be equal to 100% of the viewing height.

CSS3 has several new meanings for sizing relative to the current viewport size: vw, vh, and vmin. One block according to any of the three values ​​is 1% of the axis of the viewport. "Viewport" == browser window size == window object. If the viewport is 40 cm wide, 1vw = 0.4 cm.

1vw = 1% of the width of the viewport 1vh = 1% of the height of the viewport 1vmin = 1vw or 1vh, whichever is less than 1vmax = 1vw or 1vh, whichever is greater ( post css-tricks )

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS: Support for these new features is actually not bad in modern browsers. Look here

+12
source share

This question Height equal to dynamic width (CSS fluid layout) seems to have a good CSS-only answer by Nathan Ryan. It is also worth reading the comments below his answer for further explanation. Hope this helps.

If you find that the solution is too complicated, you might want to pay more attention to what you are trying to achieve if someone has a good alternative solution.

+2
source share

More articles:


All Articles