I want to make a div go to the bottom of the screen.
As a solution I thought of declaring said div (in the example "div2") with height:100%;
.
Not working for me, I saw people saying that the solution to this is to declare html, body {height=100%;}
.
It still doesn't work for me as shown in the snippet below.
Another thing I've tried is declaring height:100vh;
. But this is incorrect, since having "div1" causes an overflow and I simply want it to fill the screen.
html, body{
height:100%
margin 0;
}
#div1{
height:80px;
width: 100%;
background-color: red;
display:flex;
justify-content: center;
align-items: center;
}
#div2{
height:100%;
width: 100%;
background-color: green;
}
<div id="div1"> Contenido del div 1 </div>
<div id="div2"> Contenido del div 2. Este div quiero que ocupe hasta el final de la pantalla de manera vertical. </div>
Health!
You can do this via
javascript
, with its propertyscreen.heigth
, which takes the total height of the screen you're on and adds it to it via a variable. It would be something like this:This will take the height of any screen on which your page or application is displayed
place the
display:flex
in your body and add theflex-direction:column
to take 100% of the length verticallyYou also had a syntax error in the height and margin in the html,body selector
As below is the result you expect
look here the example
To achieve the desired effect you can declare the body as
display: flex
and that it occupies the entire height of the screen in addition to telling it that its address is a columnflex-direction: column
, the div that you want to occupy the rest of the space we declareflex: 1
that it is equivalent toflex-grow: 1
In your main container add a
min-height 100vh
for Set
div
width
to 100vw,Div
height Set to 100vh(The following is a brief description of vw and vh).After that, if you want apply a Reset.
Add to the class
#div2
position: fixed;
this should work, if anything tell me.