Expand page set html and css

Question

I'm building a new blogs which has a comment section within the content div. Currently, I have set my css for the body, header, navigation, content and footer as given below.

The content div will be expanding based on the number of comments being written. How can I set the css/html of the content div so that when more number of comments(for ex:- 200) the page will be automatically expanded. Right now I have set the height and width to 100%

html, body {
    height: 100%;
    width: 100%;

}

#header {
    background-color:red;
    height:10%;
    margin-bottom:1%;
}
#naigator {
    background-color:red;
    height:5%;
    margin-bottom:1%;
}

#content {
    background-color:red;
    height:75%;
    margin-bottom:1%;
}

#footer {
    background-color:red;
    height:10%
}

Answer 1

Change content 's height style to min-height :

 function addContent() { var content= document.getElementById('content'); content.innerHTML = content.innerHTML+'testing &hellip; '; if(content.innerHTML.length < 5000) { setTimeout(addContent,10); } } 

 html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; } #header { background-color:#fed; height:9%; margin-bottom:1%; } #navigator { background-color:#def; height:4%; margin-bottom:1%; } #content { background-color:yellow; min-height:74%; margin-bottom:1%; font: 20pt verdana; } #footer { background-color:#fed; height:10%; } 

 <div id="header"> <button onclick="addContent()">Add Content</button> </div> <div id="navigator"></div> <div id="content"></div> <div id="footer">Footer</div>