height 100% does not work, css

Question

height 100% does not work, css

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (1 votes)

2

In any case the red side is 100% so both have the same size, how to solve?

link

css

asked by anonymous 06.09.2015 / 17:26

4 answers

2

To determine 100% height for elements using css, the value of 100% for the "height" property of the "body" and "html" tags must be inserted in the style sheet, like this:

html,body{
 height:100%;
}
/*A div abaixo ocupara 100% da altura do "container" onde foi inserida*/
div{
 height:100%;
 width:50%;
 background:orange;
}

09.09.2015 / 20:17

1

height 100% does not work on this side because the height of the box containing it has no set value.

Assuming that the blue part always has more text than the red one, one solution would be to put the blue inside the red, like this:

*{
  padding: 0px;
  margin: 0px;
}
#barra1{
  width: 400px;
  overflow: auto;
  background-color: red;
}
#barra2{
  width: 200px;
  float: right;
  background-color: blue;
}

<div id="barra1">
  texto texto texto texto texto 
  <div id="barra2">
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 
  </div>
</div>

06.09.2015 / 17:48

1

Use the new CSS measure vh (probably View Height ). I'm using so with flex box :

#div-corpo{
    height:100vh;
    display: flex;
    flex-direction: column;
}

#div-height-100%{
    flex-grow: 1;
}

This ensures that if it has an element below it also appears, everything inside this div , accepts height: 100% .

Remember to put a min-height to mobile version!

03.07.2017 / 01:57

How to calculate distance from user's location with another address? Count of filtered dates per day in MySQL

score 4 · Accepted Answer

In order to use height:100% you need to set position:absolute to them. However when using this property elements are positioned based on a parent element that has position:absolute , position:relative or position:fixed .

So, see the example with a solution:

* {
  padding: 0px;
  margin: 0px;
}
#barras {
  height: 300px;
  position: relative;
  width: 100%;
  background: #ccc;
}
#barra1 {
  width: 200px;
  height: 100%;
  position: absolute;
  overflow: auto;
  background-color: red;
  top: 0;
}
#barra2 {
  width: 200px;
  float: right;
  height: 100%;
  overflow: auto;
  position: absolute;
  background-color: blue;
  top: 0;
  left: 200px;
}

<div id="barras">

  <div id="barra1">
    texto texto texto texto texto
  </div>

  <div id="barra2">
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
  </div>

</div>