Home/ Questions/Q 6207917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T05:43:00+00:00

I’m trying to set out a screen-fitting application to my website, but I am

  • 0

I’m trying to set out a screen-fitting application to my website, but I am having some problems, I know the ins and outs of CSS on the basics side, but I get a little confused when using percentages.

I need a header (50px), then I need a box (height 100%) then a small box footer(20px), but this all needs to be on the screen without overflow, when I try this with the given code I get an overflow because of the 100% item which pushes the footer down causing an overflow scrollbar.

<div id="holder"> <-- this is set to 100% width & height as well as html, body

     <div id="header">

     </div>

           <div id="inner_holder"> <-- This is the holder which is 100%

           </div>

    <div id="footer">

    <div/>

</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use CSS position property to position the footer at the bottom. So, the remaining space is automatically available for your inner_holder div element.

    <html>
<head>
<title>SO</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

div#holder {
    height: 100%;
    background: lightblue;
}

div#header {
    height: 50px;
    background: #800000;
}

div#inner_holder {
    background: lightblue;
}

div#footer {
    height: 20px;
    width: 100%;
    background: #800000;
    position: absolute;
    bottom: 0;
    left: 0;
}
</style>
</head>
<body>
<div id="holder">

    <div id="header">
    Header
    </div>

    <div id="inner_holder">
    Inner holder
    </div>

    <div id="footer">
    Footer
    </div>

</div>
</body>
</html>
    • 0