html5 - How to set middle div height 100% depend upon Div A And Div B using css? -
you can use flex-direction: column
this.
working example:
var header = document.getelementsbytagname('header')[0]; var main = document.getelementsbytagname('main')[0]; var footer = document.getelementsbytagname('footer')[0]; var input = document.getelementsbytagname('input')[0]; function changeheight() { var newheight = document.getelementsbytagname('input')[0].value; header.style.flex = '1 0 ' + newheight + 'px'; footer.style.flex = '1 0 ' + newheight + 'px'; main.style.height= 'calc(100vh - ' + (newheight * 2) + 'px)'; } input.addeventlistener('change', changeheight, false);
body { display: flex; flex-direction: column; margin: 0; padding: 0; } header, footer { flex: 1 0 100px; color: rgb(255, 255, 255); background-color: rgb(127, 127, 127); } header h2, footer h2 { margin: 0; padding: 0; } main { height: calc(100vh - 200px); overflow: hidden; } header, footer, main { text-align: center; } input { width: 50px; margin: 24px; }
<header><h2>header</h2></header> <main> <p>you can vertically resize <strong>header</strong> , <strong>footer</strong>.</p> <form> <fieldset> <legend>resize height of header , footer</legend> <input type="number" value="100" step="10" min="60" /> </fieldset> </form> </main> <footer><h2>footer</h2></footer>
Comments
Post a Comment