Menu
Is it even possible to make my width 100% of height using only CSS? Without using Javascript or the like.
{
width: /*100% of height*/
}
587
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
So understand most browsers default to that value, anyway. Adding min-height:100% gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its 100% height based on the viewport.
if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border. So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.
There are new css units for this
width: 100vh;
This means that the width of the element will be 100% of the viewport height.
CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.
1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger (css-tricks post)
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length
PS: Support for these new properties is actually quite good in modern browsers. See here
178
This question Height equal to dynamic width (CSS fluid layout) seems to have a good CSS-only answer by Nathan Ryan. It's also worth reading the comments below his answer for additional explanation. I hope this helps.
If you find the solution too complex, it might be worth giving more context to what you are trying to achieve in case someone has a good, alternative solution.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
