Geek asks and answers

How to make an element full page height?

Is there a way I could set the div element to occupy the entire height on the page. Sort of:

div.left {
  height: 100%;
  width: 50%;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

I have had this several times, but they all seem really very difficult to work on, which is probably a really very simple problem with a simple solution.

+5
source share
5 answers

If it divis a direct child body, this works:

body, html {height: 100%; }
div { height: 100%; }

Otherwise, you need to continue to add height: 100%parents, grandparents to each of them ... until you reach a direct child body.

. , , (px,%... ). , height: auto;

, : , .

+13

, div .

height: 100vh;

vh , 1vh 1% . CSS.

+5

, height: 100% html body, div ! , .

+1

html body 100%:

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

Fiddle .

+1

This problem can be solved with CSSflexbox. Check out the w3schools flexbox documentation here and another css-tricks useful link here

In this scenario.

put display: flexible; in parent div container

div.container{
  height: 100%;
  display: flex;
}

then in display child div enter display: 1;

div.left{
  height: 100%;
  display: 1;
}

note that if the height of the parent container div is set dynamically, the child div will always be the same height as the parent.

+1
source

More articles:


All Articles