Issue
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.
Solution
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
Answered By - DINO
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.