Databases
StackOverflow2013
Postsdbo
PODiv height 100% causing overflow issues
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv height 100% causing overflow issues
    primarykey
    data
    text
    <p>I recently decided to ditch tables and go with a div solution on this new project, however I'm having a really weird issue when setting a div within another div to 100% without it causing overflow equal to the height of the div's above it. It's acting like the browser isn't aware of the div's above it occupying that space.</p> <p>I have a wrapper div with a fixed width and height set to 100%, within that is 3 column divs (left, mid and right) in the mid column I have 3 div's, the top 2 have fixed heights 90px and the 3rd is set to 100% to fill the rest of the content area but it's breaking out of the wrapper div and causing exactly 180px overflow. I setup this simple layout on JSFiddle: <a href="http://jsfiddle.net/KtUgF/1/" rel="nofollow">Height: 100% Div Issue</a></p> <pre><code>&lt;body&gt; &lt;div class="wrapper"&gt; &lt;div class="left"&gt; &lt;div style="background-color:fuchsia; height: 90px;"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;div class="mid"&gt; &lt;div style="background-color:purple; height: 90px; width: 998px;"&gt;&amp;nbsp;&lt;/div&gt; &lt;div style="background-color:blue; height: 90px; width: 998px;"&gt;&amp;nbsp;&lt;/div&gt; &lt;div style="background-color:black; height: 100%; width: 50%;"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;div style="background-color:fuchsia; height: 90px;" class="right"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>You will notice the black div is breaking out of the yellow (mid) div, this should not happen! Any help would be greatly appreciated. Thanks!</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. USbfritz
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODiv height 100% causing overflow issues
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is what the table solution looks like of what I'm trying to do: <table style="width: 100%; height: 100%;"> <tr> <td style="height: 90px">&nbsp;</td> </tr> <tr> <td style="height: 90px">&nbsp;</td> </tr> <tr> <td style="height: 100%">&nbsp;</td> </tr> </table> Why is the div method so much more difficult?
      singulars
      1. PODiv height 100% causing overflow issues
      1. USbfritz
    2. COhttp://jsfiddle.net/KtUgF/7/
      singulars
      1. PODiv height 100% causing overflow issues
      1. USMarco Geertsma
    3. CO@MarcoGeertsma I don't see any update on that fiddle?
      singulars
      1. PODiv height 100% causing overflow issues
      1. USbfritz
 

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