Adjust the CSS to set the size of the element's height to a percentage of the screen

Question

Adjust the CSS to set the size of the element's height to a percentage of the screen

I'm curious if there's a way to set the CSS with an x (unknown) percentage amount, like height: *%;. If it's not possible, how can I make it take the size of the rest of the screen?

I experimented in http://jsfiddle.net/omarjuvera/xnau2wsL/ and http://jsfiddle.net/omarjuvera/xnau2wsL/1/, but in this fiddle, these div elements aren't taking the desired screen height size or using the whole screen together.

HTML

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!</div>

CSS

#hello {
    border: solid black 2px;
    min-height: 10%;
}
#shout {
    border: solid brown 2px;
    /*inherit height from content*/
}
#world {
    border: solid blue 4px;
    height: *;
}

I prefer not to set a height with pixels and overflow since I want to have a mobile-friendly (Responsive Web Design) CSS.

Notes

Height size for #hello is known as 10% of media (screen) size
Height size for #shout is unknown (inherited from the content)
Height size for #world is the remaining percentage (x%) of the media
Can this be achieved without changing the semantics? -No container or changes, just CSS

html css

Answer 1

Answer №1

is using display:table the best approach here?

html,body {
  height:100%;
  width:100%;
  }
body {
  display:table;
  border-collapse:collapse;
  margin:0;
  box-sizing:border-box;
  }
body>div {
display:table-row;
  }
#hello {
  height:10%;
  border:green solid;
  }
#world {
  border:solid purple;  
  }
#shout:hover {
  height:15%;
  }
#shout {
  height:1%;
  border:red solid;
  }

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!,hover me to make me grow</div>

would it be better with display:flex instead?

html,body {
  height:100%;
  }
body {
  display:flex;
  flex-direction:column;
  margin:0;
  }
#hello {
  height:10%;
  border:green solid;
  }
#world {
  border:solid purple;  
  flex:1
  }
#shout { 
;
  border:red solid;
  }
#shout:hover {
  height:25%;
  }

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!, hover me to make me grow</div>

Answer 2

is using display:table the best approach here?

html,body {
  height:100%;
  width:100%;
  }
body {
  display:table;
  border-collapse:collapse;
  margin:0;
  box-sizing:border-box;
  }
body>div {
display:table-row;
  }
#hello {
  height:10%;
  border:green solid;
  }
#world {
  border:solid purple;  
  }
#shout:hover {
  height:15%;
  }
#shout {
  height:1%;
  border:red solid;
  }

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!,hover me to make me grow</div>

would it be better with display:flex instead?

html,body {
  height:100%;
  }
body {
  display:flex;
  flex-direction:column;
  margin:0;
  }
#hello {
  height:10%;
  border:green solid;
  }
#world {
  border:solid purple;  
  flex:1
  }
#shout { 
;
  border:red solid;
  }
#shout:hover {
  height:25%;
  }

<div id="hello">Hello</div>
<div id="world">world</div>
<div id="shout">!, hover me to make me grow</div>

Answer 3

Answer №2

To make sure the divs reach a specific height using percentage, it is important for the container enclosing the divs to have a defined height in the css: http://jsfiddle.net/xwyg89jk/

If the container happens to be the body tag, you can specify:

html {
height: 100%;
}

body {
height: 100%;
}

Answer 4

To make sure the divs reach a specific height using percentage, it is important for the container enclosing the divs to have a defined height in the css: http://jsfiddle.net/xwyg89jk/

If the container happens to be the body tag, you can specify:

html {
height: 100%;
}

body {
height: 100%;
}

Answer 5

Answer №3

The percentage is calculated based on the height of the parent, so you must have a parent element with a specified height.

To ensure proper sizing, you should include

height: 100%; position: absolute;

in the wrapper's CSS:

#hello {
    border: solid black 2px;
    min-height: 10%;
}
#shout {
    border: solid brown 2px;
}
#world {
    border: solid blue 4px;
    height: 70%;

}
#wrap{
    height: 100%;
    position: absolute;
}

<div id="wrap">
    <h1>Size and unit % wildcard</h1>
    <div id="hello">Hello</div>
    <div id="world">world</div>
    <div id="shout">!</div>
</div>

Answer 6

The percentage is calculated based on the height of the parent, so you must have a parent element with a specified height.

To ensure proper sizing, you should include

height: 100%; position: absolute;

in the wrapper's CSS:

#hello {
    border: solid black 2px;
    min-height: 10%;
}
#shout {
    border: solid brown 2px;
}
#world {
    border: solid blue 4px;
    height: 70%;

}
#wrap{
    height: 100%;
    position: absolute;
}

<div id="wrap">
    <h1>Size and unit % wildcard</h1>
    <div id="hello">Hello</div>
    <div id="world">world</div>
    <div id="shout">!</div>
</div>

Adjust the CSS to set the size of the element's height to a percentage of the screen

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

Show concealed content for individuals who do not have javascript enabled

Problem with Jquery hover or mouse enter show/hide functionality

Troubleshooting problem with printing iframes on Firefox

Is there a way to completely remove an element from the dom once the ajax call has returned

Show the name of the current user in a WordPress form using a readonly input field

What could be causing the issue with the width: 100% not rendering correctly in this

Having Trouble with jQuery toggleClass

Causes for the display of the text within the alt attribute

The value returned when using $.css('transform') is incorrect and displays as "rotate"

Error in Javascript programming | tracking progress bar

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Horizontal scroll box content is being truncated

The applet failed to load on the HTML webpage

Quick and hassle-free form editing is a breeze with our user-friendly platform

Displaying information from a database in an HTML form using PHP

store user settings in local storage

Using the concept of a while loop in PHP, you can easily retrieve the values of Radio Buttons on one page and

Please submit information that is not already filled out in the text fields

Protecting against overflow for text inside a container that changes when hovered over