Home/ Questions/Q 9268761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:56:30+00:00

Suppose I have a title div, a content div and a footer div. <div

  • 0

Suppose I have a title div, a content div and a footer div. 

<div id="header">
   Title
</div>
<div id="content" style="background:red">
       <p>TEST</p>
</div>
<div id="footer">
   footer
</div>

How can I always set the title div to be 20%, content to be 70% div and the footer to be 10%?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working example on JS Bin.

    HTML:

    <!DOCTYPE html>
  <body>
    <div class="container">
      <div id="header" style="background:blue">
        Title
      </div>
      <div id="content" style="background:red">
        <p>TEST</p>
      </div>
      <div id="footer" style="background:gray">
        footer
      </div>
    </div>
  </body>
</html>

    CSS:

    * {
  margin: 0;
  padding: 0;
}

html,
body,
.container {
   height: 100%;
}

#header {
   height: 20%;
}

#content {
   height: 70%;
}

#footer {
   height: 10%;
}
    • 0