Databases
StackOverflow2013
Postsdbo
POPure CSS for 2 columns with the same height but stretching to a min-height of 100%
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPure CSS for 2 columns with the same height but stretching to a min-height of 100%
    primarykey
    data
    text
    <p>I'm working on a template for my web app. It should have a header, a footer, a body and a side menu with a gradient background. The page should look similar in any resolution starting from 800x600, and because of that I'm using percentajes instead of fixed sizes. Also, it should work in IE7/8, so I'm trying to avoid CSS3 and webkit/gecko only features </p> <p>Since the body content might exceed the size of the screen, I'm using <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="nofollow noreferrer">this</a> approach to keep the column's height the same.</p> <p>The problem I'm facing is: when the body content is smaller than the screen, and no scroll needed, it would be desirable that the column's background fill the 100% of the available viewport, excluding header and footer.</p> <p>I consider myself more a Java guy than a web designer, so I'm not pretty sure what I'm doing when it comes to CSS, but I've tried <a href="https://stackoverflow.com/questions/7071012/multiple-column-layout-with-equal-height-minimum-100-of-the-viewport-and-roun">this</a> with no results. Is there a way to achieve my goal without javascript?</p> <p>Here is my code. In spite of my efforts to clean it up before asking this question, it might seem unclean due to all the changes I've been testing.</p> <p>CSS</p> <pre><code>* { margin-top: 0; margin-bottom:0; } html, body { height: 100%; margin: 0; padding: 0; background-color: rgb(216, 218, 234); } #container { width: 80%; min-height: 100%; height: 100%; margin-left: 10%; margin-right: 10%; background-color: rgb(255, 255, 204); } #header { min-height:120px; height: 19%; width: 100%; background-color: #CCC; clear: both; float: left; } #subcontainer { clear: both; min-height: 77%; height: auto !important; height: 100%; background-color: rgb(255, 255, 204); position: relative; } #menuback { float: left; width: 100%; min-height: 100%; position:relative; right:85%; background: #088316; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#088316), to(#FFFFFF)); background: -webkit-linear-gradient(#088316, #FFFFFF); background: -moz-linear-gradient(#088316, #FFFFFF); background: -ms-linear-gradient(#088316, #FFFFFF); background: -o-linear-gradient(#088316, #FFFFFF); background: linear-gradient(#088316, #FFFFFF); -pie-background: linear-gradient(#088316, #FFFFFF); behavior: url(/pie/PIE.htc); } #menu { float: left; width: 15%; min-height:100%; position:relative; left:85%; } #fondocuerpo { float: left; width: 100%; min-height:100%; overflow:hidden; position:relative; background-color: #DDF; } #cuerpo { float: left; width: 85%; min-height:100%; position:relative; left:85%; } #footer { clear:both; width: 100%; height:4%; background: #007F0E; } </code></pre> <p>HTML</p> <pre><code>&lt;body&gt; &lt;div id="container"&gt; &lt;div id="header"&gt; &lt;p&gt;Header&lt;/p&gt; &lt;/div&gt; &lt;div id="subcontainer"&gt; &lt;div id="fondocuerpo"&gt; &lt;div id="menuback"&gt; &lt;div id="menu"&gt; &amp;nbsp; &lt;p&gt;Menu&lt;/p&gt; &lt;/div&gt; &lt;div id="cuerpo"&gt; &lt;p&gt;body&lt;/p&gt; &lt;p&gt;body&lt;/p&gt; &lt;p&gt;body&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;p&gt;Footer&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>And <a href="http://jsfiddle.net/WvXCm/" rel="nofollow noreferrer">this</a> is how it should behave when the content is smaller than the viewport.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USDiegoAlfonso
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COwhat browsers does this have to be compatible for?
      singulars
      1. POPure CSS for 2 columns with the same height but stretching to a min-height of 100%
      1. USPete
    2. COalso are the header and footer known (fixed) heights
      singulars
      1. POPure CSS for 2 columns with the same height but stretching to a min-height of 100%
      1. USPete
    3. CO@Pete I'm targeting to Chome and Firefox, but my main client uses IE7. Regarding the header and footer, I'm working with percentajes because I would like them to shrink or expand depending on user's screen resolution (my main client has a quite old computer and uses 800x600), but I can set them fixed heights if that solves the problem.
      singulars
      1. POPure CSS for 2 columns with the same height but stretching to a min-height of 100%
      1. USDiegoAlfonso
 

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