Databases
StackOverflow2013
Postsdbo
PO100% height container is pushed out of IE viewport by absolute positioning
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO100% height container is pushed out of IE viewport by absolute positioning
    primarykey
    data
    text
    <p>The following behaves exactly as I expect it to in Firefox and Safari, but the solution for Internet Explorer eludes me.</p> <p><strong>The Issue</strong>: Non-IE browsers show the container properly pushed away from the sides of the viewport. IE however, maintains a strict 100% height on the container (presumably based on a parent of that container) and instead offsets the container, pushing it off the bottom of the viewport. </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;title&gt;The Splits&lt;/title&gt; &lt;head&gt; &lt;style&gt; html, body {margin:0;padding:0;height:100%;} html { height:auto; min-height:100%; overflow:hidden; } div#container { position:absolute; top:50px; right:20px; bottom:20px; width:290px; max-height:100%; #height:100%; } div#one, div#two { position:relative; height:50%; overflow:auto; } div#one {background-color:lightgreen;} div#two {background-color: lightblue;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="one"&gt;top&lt;/div&gt; &lt;div id="two"&gt;bottom&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>An absolutely positioned container holds two 50% height elements.</p> <p>Requirements are as follows:</p> <ol> <li>The positioning of the container is arbitrary, but it must be pushed away from the sides of the viewport without relying on padding on the viewport.</li> <li>When the viewport is resized, the height of the two elements within the container must resize based on a percentage value (currently 50% each).</li> <li>This must work in IE 7+ and Firefox 3+ at a minimum.</li> <li>If this results in an "OH DUH!" moment for me, you will try not to gloat.</li> </ol> <p>I've tried many combinations of position and height attributes on the HTML and BODY elements, but apparently have not hit upon the right one for IE.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMooseboy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYour code works identically for me in IE 8, FF 3.6 and Chrome v8. I can't speak to earlier versions, though.
      singulars
      1. PO100% height container is pushed out of IE viewport by absolute positioning
      1. USPatches
 

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