Home/ Questions/Q 315487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:17:46+00:00

I’m trying to get the following layout: Link to Image And this is what

  • 0

I’m trying to get the following layout: Link to Image

And this is what I’m doing in code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
<div style="position:absolute; width: 100%; height: 100%" id="container">
     <div id='Header'>Header</div>
     <div id='Content' style='height:100%; background: gray;'>Content</div>
</div>     
</body>
</html>

But this way content gets height of the browser window (parent div), and adds it to first 20 pixels occupied by header, resulting in window scrolling (20px + height of the window == out of the screen). I can use “overflow: hidden” for the content, but I don’t want to give the content extra space.

In WPF I could do this by adding a Grid with two rows (Height=”Auto” and Height=”*”). Maybe I should give up and use tables?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Setting width: 100% , as you know, will be like setting width: <width of the window>.

    Instead you can set the Content’s edges to be at 0px from the right, left and bottom of the screen.

    The CSS of your page will be like this:

    body {
    margin: 0px;
    top: 0px;
}
#container {
    color: white;
}
#Header { 
    background-color: grey;
    padding: 6px;
}
#Content {
    position: absolute;
    top: 30px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: 0px;
    padding-top: 6px;
    padding-left: 6px;
    background-color: blue;
}

    This way the page has the same look as the image you provided.

    • 0