Databases
StackOverflow2013
Postsdbo
POHow to properly set the 100% DIV height to match document/window height?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to properly set the 100% DIV height to match document/window height?
    primarykey
    data
    text
    <p>I have a wrapper positioned to center with an y-repeated background image:</p> <pre><code>&lt;body&gt; &lt;div id="wrapper"&gt; ...some content &lt;/div&gt; &lt;/body&gt; #wrapper{ width: 900px; margin: 0 auto 0 auto; background-image: url(image.jpg) 250px 0px repeat-y; } </code></pre> <p>Problem: when the window size is higher than the wrapper's height inherited from its content, the image obviously doesn't repeat on y-axis all the way to the bottom of the window.</p> <p>I've used jQuery to dynamically apply inline CSS style to the wrapper according to actual document height (when DOM is ready and on window resize event):</p> <pre><code>$(function(){ $('#wrapper').css({'height':($(document).height())+'px'}); $(window).resize(function(){ $('#wrapper').css({'height':($(document).height())+'px'}); }); }); </code></pre> <p>The problem with this approach is that every time one extends the window height to a size larger than the previously resized largest size, the document height extends by this difference, essentially making the wrapper DIV infinite if you keep resizing the window infinitely and have a infinite vertical display space.</p> <p>On a typical 30" inch display with 1600px height, when user opens the website with a window height 1000px and wrapper is 800px high, the jQuery above sets the height to 1000px tiling the background image correctly. At this point, once the user extends the window size to e.g 1400px, the 1400px is a new document size "remembered default" and doesn't update itself even if the user resizes his window back to the original 1000px height, adding <b>400px to the scrollbar height</b> at the bottom.</p> <p>How to fix this?</p> <p>UPDATE: (window).height doesn't seem to work, because window height is a viewport height. When your viewport is smaller than the content and you scroll it, the wrapper always stays the size of the viewport and doesn't extend to the bottom of the current viewport position.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDominiqueBal
    1. USDominiqueBal
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to properly set the 100% DIV height to match document/window height?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to properly set the 100% DIV height to match document/window height?
      1. USk25
      1. VTFavorite
    3. VO
      singulars
      1. POHow to properly set the 100% DIV height to match document/window height?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPut the back ground image in a separate class. Then remove and re-add that class after resize or during resize?
      singulars
      1. POHow to properly set the 100% DIV height to match document/window height?
      1. USthenetimp
    2. COTry doing `$(window).height()` instead of `$(document).height()`
      singulars
      1. POHow to properly set the 100% DIV height to match document/window height?
      1. USChad
    3. CO$(window).height() is not correct, e.g. if your window size is just 200px high, the DIV then stays 200px high as well. When you scroll, the repeat-y background stops on the 200px treshold while the actual content is much longer.
      singulars
      1. POHow to properly set the 100% DIV height to match document/window height?
      1. USDominiqueBal
 

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