Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Using the table display properties, you could overcome the firefox problem by wrapping two more elements around the text of the scrolling section, so you have three:</p> <ul> <li>the outer one is a <code>table-row</code> container that fills the rest of the table</li> <li>inside which we have a <strong>relatively</strong> positioned container with <code>height</code> and <code>width</code> set to <code>100%</code>, and with set vertical scrolling <code>overflow-y:scroll;</code></li> <li>the innermost container is <strong>absolutely</strong> with <code>height</code> and <code>width</code> also set to <code>100%</code></li> </ul> <p>So here I just quickly added two div containers around your content paragraph (you could probably found a more appropriate set of containers according to your needs, but this will do for the illustration):</p> <pre><code>&lt;div id="wrapper"&gt; &lt;h2 id="date"&gt;Date&lt;/h2&gt; &lt;h1 id="title"&gt;A title ...&lt;/h1&gt; &lt;div id="contentbox-outer"&gt; &lt;div id="contentbox-inner"&gt; &lt;p id="content"&gt;The content ...&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And your whole CSS has to be modified. Your original selectors, with slight modifications:</p> <pre><code>#wrapper { position:absolute; display: table; table-layout:fixed; background-color:black; padding:10px; width: 250px; height:350px; border-spacing:20px; } #date { display: table-row; font-weight: normal; font-size: 25px; background-color:yellow; } #title { display: table-row; font-weight: normal; font-size: 40px; line-height:90%; background-color:blue; } </code></pre> <p>note that the <code>table-row</code> and <code>table</code> elements take now speciffinc styling for tables, like the <code>border-spacing</code> property that sets spacing between the table rows, and this you can now combine with the padding property of the table for the appearance you want.</p> <p>And the styling for the added containers would be something like this (first is still based on your styling, the last two are the additional - inner ones):</p> <pre><code>#contentbox-outer { display: table-row; font-size: 12pt; width: 100%; height:90% !important; text-align: justify; background-color:red; overflow-y: scroll; } #contentbox-inner { position:relative; height:100%; width:100%; overflow-y:scroll; } #content { position:absolute; height:100%; width:100% } </code></pre> <p>I also updated your fiddle for a quick check: <a href="http://jsfiddle.net/3HYJx/7/" rel="nofollow">http://jsfiddle.net/3HYJx/7/</a></p> <p><strong>Edit:</strong> This works in browsers like Firefox, Chrome, Safari, but for example not in Opera cause <code>height: 100%</code> does not get rendered in documents in strict mode. So with a little more research I found out that you can get it to work in <strong>quirks mode</strong>, here is a <strong><a href="http://newtpond.com/quirksmode.html" rel="nofollow">test html</a></strong> - the above code but in a quirks mode document. Thanks for giving me a reason to learn that, it's good to know =)</p>
    singulars
    1. This table or related slice is empty.
    1. POCSS display:table for filling height. Different in Chrome/Safari vs Firefox/Opera
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USigorsantos07
    1. USMartin Turjak
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCSS display:table for filling height. Different in Chrome/Safari vs Firefox/Opera
      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. VTUpMod
    1. COThis seems to be working in both Chrome and Firefox, thanks a lot. Opera still doesn't seem to get it though.
      singulars
      1. PO
      1. USgleerman
    2. COAlso works in Safari, I can think a little more what could work for Opera.
      singulars
      1. PO
      1. USMartin Turjak
    3. COAfter looking a around a little I found this article [http://www.ruzee.com/blog/2006/05/cells-with-100-height-in-html-tables] saying that in Opera in tables `hight:100%` does not render right in strict mode but in quirks mode works like a charm. Adding it to the answer.
      singulars
      1. PO
      1. USMartin Turjak
 

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