Databases
StackOverflow2013
Postsdbo
POUnspecified content height with Automatic Overflow and header/footer always in view and no scroll wheel on the page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnspecified content height with Automatic Overflow and header/footer always in view and no scroll wheel on the page
    primarykey
    data
    text
    <p>Okay, so I'm having rather annoying problems with what should be simple code, I've searched for duplicates but it appears to be different in a slight way. Here's my basic layout:</p> <p><strong><em>html:</em></strong></p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="header"&gt;&lt;/div&gt; &lt;div id="content"&gt;&lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong><em>css:</em></strong></p> <pre><code>html,body,#wrapper { height: 100%; margin: 0; padding: 0; } #wrapper { position: relative; } #header { position: fixed; top: 0px; height: 40px; width: 100%; color: white; background-color: #000000; } #content { position: fixed; padding-bottom: 50px; /* to match the footer height*/ top: 40px; bottom: 50px; height: 100%; width: 100%; overflow: auto; } #footer { position: fixed; bottom: 0px; height: 49px; width: 100%; border-top: 1px solid #000000; background-color: skyblue; font-weight: bold; } </code></pre> <p>The idea is that the 3 divs inside the wrapper take up 100% of the page - in other words: all them are <strong>always in view</strong>. Header up top, footer on the bottom and content in the middle respectively. </p> <p>The footer and header can be fixed size (be it pixels or % of page height), the content I want to automatically take up the rest of the page. </p> <p>The problem is that the page can be of many different resolutions(so content can't be of fixed height, unless I use javasript). Another thing is that the content div can have variable amount of elements, meaning it has to allow the scrolling of the content while keeping both header and footer in view. The main part is: the scroll-wheel <strong>must be</strong> inside the content div, not page-wide.</p> <p>I almost have what I want with this css, but some of the content can't be scrolled to when they overflows content div (I'm talking vertical overflows - there will be no horizontal ones). I would really appreciate some help, but this is not as easy/simple as it seems, if possible at all as I think you need a fixed height for overflow: auto.</p> <p>I want a pure css solution, if possible, so don't mention JqueryMobile to me (or ever).</p> <p>Here's how it looks right now, notice the scroll-wheel problem on the content div: <img src="https://i.stack.imgur.com/l7ady.png" alt="layout is almost correct, minus the overflow behaviour"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNisk
    1. USNisk
    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. This table or related slice is empty.
 

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