Good day! Please help, I am a beginner coder, I’m trying to impose something on my idea and I have the following problem: I have the following code:
<body> <header></header> <div id="body"> <div id="table-content-wrapper"> <div id="cell-content-wrapper"> <div id="main-page-content"> <div style="height:20px; width:100%;"></div> <div style="height:139px; width:100%;"></div> <div style="max-height:70px; min-height:30px; height:10%; width:100%;"></div> <div style="height:211px; width:100%;"></div> <div style="max-height:30px; min-height:20px; height:5%; width:100%;"></div> <div style="height:100px; width:100%;"></div> <div style="max-height:45px; min-height:30px; height:7%; width:100%;"></div> <div style="height:61px; width:100%;"></div> <div style="height:20px; width:100%;"></div> </div> </div> </div> </div> <footer></footer> </body> Problem: when resizing a window, blocks with attributes min-max height do not change their height, change more precisely, but immediately, SHARP, in the limit values, that is, it is admissible 30 becomes sharply 70px, plus only the when the elements are 'layered' on the 61px footer! Help make the main-page-content elements do not go beyond the boundaries of the block and the heights of such blocks gradually change.
<div style="max-height:70px; min-height:30px; height:10%; width:100%;"></div> 
