Databases
StackOverflow2013
Postsdbo
POCSS: content area has to take 100% height
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: content area has to take 100% height
    primarykey
    data
    text
    <p>this is driving me crazy... I'm building the page at <a href="http://one29090testvdscom.accounts.combell.net/nl" rel="nofollow">http://one29090testvdscom.accounts.combell.net/nl</a>. It's a page that has a header, left menu, content and footer. Width is fixed at 960px, centered horizontally. This all works. But then, if there is little text in the content, I would like that the gray content area always takes the available screen height, so that the footer is down the page. </p> <p>The page looks like:</p> <pre><code> &lt;body&gt; &lt;!-- Centered container that contains site --&gt; &lt;div id="centeredcontainer"&gt; &lt;!-- Area with header --&gt; &lt;div id="header"&gt; header here &lt;/div&gt; &lt;!-- Area that contains main menu on the left and content on the right --&gt; &lt;div id="mainmenuandcontent"&gt; &lt;!-- Main menu on the left --&gt; &lt;div id="mainmenu"&gt; main menu here &lt;/div&gt; &lt;!-- Content on the right --&gt; &lt;div id="content"&gt; body here &lt;/div&gt; &lt;!-- Clears the floats so that next elements can use margins normally --&gt; &lt;div class="clearer"&gt;&lt;/div&gt; &lt;!-- Red line under content --&gt; &lt;div id="RedLineUnderContent"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- Area with languages --&gt; &lt;div id="languages"&gt; footer here &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And the relevant CSS is:</p> <pre><code>body { font-size: 12px; font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif; line-height:1.5em; margin: 0; padding: 0; background-color: Black; } #centeredcontainer { width: 960px; margin-left: auto ; margin-right: auto ; } #header { margin-bottom: 20px; margin-top:20px; } #mainmenuandcontent { width: 960px; clear: both; position: relative; } #mainmenu { float: left; width:180px; padding:10px; } #content { float: left; background-color: #403F3F; width: 760px; min-height: 400px; color:White; } #RedLineUnderContent { height: 20px; background: #A10C10; margin-left: 200px; } #languages { margin-top: 10px; margin-left: 200px; margin-bottom:20px; text-transform:uppercase; } .clearer { clear:both; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJarrod Dixon
    1. USL-Four
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS: content area has to take 100% height
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POCSS: content area has to take 100% height
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. POCSS: content area has to take 100% height
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI've had the same problem, but I've never been able to figure out the solution. For whatever reason, `height: 100%;` in CSS has never worked for me. I don't know enough about JavaScript right now, but perhaps you should use it to detect the user's screen resolution and set the height to the approximate number of pixels. Do tell me if you find a suitable solution though.
      singulars
      1. POCSS: content area has to take 100% height
      1. USEdwin
    2. COI think I found one, see my answer...
      singulars
      1. POCSS: content area has to take 100% height
      1. USL-Four
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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