Is it possible for child divs to adjust their height automatically based on a percentage within a parent div with set max dimensions using CSS?
HTML:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
CSS:
html, body {
height: 100%;
width: 100%:
}
#parent {
max-width: 400px;
max-height: 600px;
}
#top {
height: 30%;
}
#bottom {
height: 70%;
}
This setup is intended for a mobile display that fills the screen height proportionally without causing vertical scrolling.
EDIT: Upon further reflection, it seems that using CSS alone may not allow for a flexible height that matches the screen size. JavaScript intervention may be necessary in this case.