I have two divs that should take whole page while each one is 50% of the page (50vh) but once I apply that the resizing goes crazy and elements overlap when the size becomes smaller and smaller, any workaround? I would like to achieve the typical disappearing of whole page that it gets removed from viewport, not overlapping.
#top {
background-color: red;
}
#bottom {
background-color: blue;
}
div {
height: 50vh;
}
<div id='top'>
<h1>Test</h1>
<input id='testInputOne' type='text'>
</div>
<button id='testButton' type='button'>Test</button>
<div id='bottom'>
<input id='testInputTwo' type='text'>
<h1>Test</h1>
</div>
https://jsfiddle.net/tr40z716/
I tried to add one more div that would hold the two divs but no help.
CodePudding user response:
I have made a guess on what you need and made this using flex-direction: column and flex-grow: 1.
jsfiddle.net/dinodev/9m1yLzvs/5
CodePudding user response:
If you dont want the page to be scrollable, there‘s no way to display 3 elements if 2 of them already take up the whole size of the page.
There are 2 Solutions. Either you scroll, then both divs
can be 50vh
or you use the following css, wich makes the divs
50vh - the height of the button / 2.
Note that also the margin / padding of all elements needs to be removed or added to the calculaction to prevent an overflow. For padding, you can also set box-sizing: border-box
, so that the padding will be included in the normal height of the element and doesnt need to be added to the calculation.)
Here‘s an example:
* {
margin: 0;
padding: 0;
}
#top {
background-color: red;
}
#bottom {
background-color: blue
}
button {
height: 20px;
}
div {
height: calc(50vh - 10px)
}
<div id='top'>
<h1>Test</h1>
<input id='testInputOne' type='text'>
</div>
<button id='testButton' type='button'>Test</button>
<div id='bottom'>
<input id='testInputTwo' type='text'>
<h1>Test</h1>
</div>
Hope that helps
CodePudding user response:
Here are two solutions even I don' really understand your goal.
CSS :
html, body{
margin:0px;
}
h1{
margin:0px;
padding:10px;
border:none;
}
#top {
background-color: red;
height:50vh;
/* min-height:100px;
solution 1 if You remove the #mainContainer div
and uncomment min-height*/
}
#bottom {
background-color: blue;
height:50vh;
/* min-height:100px;
solution 1 if You remove the #mainContainer div
and uncomment min-height*/
}
#mainContainer{
display:grid;
grid-template-rows: repeat(2,50vh);
/* Solution 2 : use the main container div
use the display:grid
Solution 2 is used by default here*/
}
HTML :
<div id="mainContainer">
<div id="top">
<h1>Test</h1>
<input id="testInputOne" type="text">
</div>
<div id="bottom">
<h1>Test</h1>
<input id="testInputTwo" type="text">
</div>
</div>