Note that there are some explanatory texts on larger screens.

plurals
  1. POHeight page - Div structure
    primarykey
    data
    text
    <p>I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.</p> <p>The div's should expand when the page resizes, with the right background color.</p> <p>The bugs I have at the moment are : - Footer stays at bottom of the screen not of the page. - div (menu) is bigger than the div (content) - the div doesn't resize properly</p> <p>Here's my code:</p> <p><strong>Div stucture</strong></p> <pre><code>&lt;div id="container"&gt;&lt;br /&gt; &lt;div id="header"&gt;CMS&lt;/div&gt; &lt;div id="menu"&gt;&lt;?php include ('includes/menu.php');?&gt;&lt;/div&gt; &lt;div id="content"&gt; &lt;?php include $include_page?&gt; &lt;/div&gt; &lt;div id="footer"&gt;CMS&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>body { height: 100%; color: #0b0b0b; background-color: #696060; margin: 0px; padding: 0px; font-family: Tahoma, sans-serif; font-size: 12.5px; } #container { margin-left: auto; margin-right: auto; width: 1000px; background-color: #f1f1f1; border-left: 1px solid #8f8f8f; border-right: 1px solid #8f8f8f; height: 100%; } #header { height: 100px; width: 100%; background-color: #a31f00; color: #fcfcfc; text-align: center; } #menu { width: 210px; background-color: #e0e0e0; float: left; padding: 10px 10px 10px 10px; height: 100%; } #content { width: 750px; height: 100%; float: left; padding: 10px 10px 10px 10px; } #footer { position: absolute; bottom: 0; width: 1000px; height: 20px; background-color: #a31f00; color: #fcfcfc; text-align: center; font-size: 11px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload