Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The only solution that immediately comes to mind is display:table-cell, though you run into the problem of lack of support in ie6 &amp; ie7. Perhaps providing the rule for good browsers, and some javascript to calculate differences in height for ie?</p> <p>Edit: </p> <p>Here's another approach - using jQuery to calculate the offset. Bear in mind this is just a quick &amp; dirty attempt - it would need to be browser tested and you'd want some simple error handling etc., but it could be a starting point.</p> <p>Not sure if javascript is the way you want to go but I can't see it being done in pure css. </p> <p>I changed the ids to classes so that you can have multiple 'fixedHeight' boxes: </p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt; &lt;script&gt; $(function() { $(".fixedHeight").each(function() { var head = $(this).find(".head"); var body = $(this).find(".body"); var foot = $(this).find(".foot"); body.css("margin-top", head.height()).css("margin-bottom", foot.height()); }); }); &lt;/script&gt; &lt;style&gt; .head { background-color: red; position: absolute; top: 0; width:100%; } .body { background-color: blue; color: white; overflow: auto; position:absolute; top:0; bottom:0; width:100%; margin:2.5em 0; } .foot { background-color: green; position: absolute; bottom: 0; width:100%; } .container { background-color: #aaa; border: 10px solid orange; height: 300px; width: 30%; position: absolute; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container fixedHeight"&gt; &lt;div class="head"&gt; &lt;h1&gt;Header Content&lt;/h1&gt; &lt;/div&gt; &lt;div class="body"&gt; &lt;p&gt;Body Content&lt;/p&gt; &lt;p&gt;Body Content&lt;/p&gt; &lt;p&gt;Body Content&lt;/p&gt; &lt;p&gt;Body Content&lt;/p&gt; &lt;p&gt;Body Content&lt;/p&gt; &lt;p&gt;Body Content&lt;/p&gt; &lt;/div&gt; &lt;div class="foot"&gt; &lt;p&gt;Footer Content&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POCSS Height: Fill available space. No fixed heights
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDHuntrods
    1. USDHuntrods
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCSS Height: Fill available space. No fixed heights
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COie7 support is needed. What dos display: table-cell imply? Does table-cell take up as much space as possible from it's parent?
      singulars
      1. PO
      1. USDmitriy Likhten
    2. COThis solution does not work. In order to get it to display correctly I need to have a parent div with `display: table` however a table does not seem to respect the height property. So if I set the table's `height` to 300px it will expand as long as necessary. Even with `max-height` it does not respect it. I tried making head/foot as `display: table-row` and body as `display: table-cell` and container as `display: table` and it works perfectly, until I need body to scroll at which point it just starts growing.
      singulars
      1. PO
      1. USDmitriy Likhten
    3. COOf course - height on a table always implies min-height! Perhaps if you provided some additional context & content for what you're trying to do? I'm not sure that this precise arrangement can be done in purely in css, but perhaps an alternative approach would solve the problem?
      singulars
      1. PO
      1. USDHuntrods
 

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