Databases
StackOverflow2013
Postsdbo
POScroller with dynamically sized headers/footers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScroller with dynamically sized headers/footers
    primarykey
    data
    text
    <p>What I'm looking for is to have a container <code>div</code> with any number of headers and footers which would then have another scrolling <code>div</code> in between the various headers/footers. The catch is here that the headers and footers can't scroll and the container/headers/footers can take any height depending on their content.</p> <p>I've only been able to get this working with a statically sized header/footer. In the code I've added the problem I've come across: the text in the header/footer may wrap, which will bring it to two lines. So the header should grow to allow this extra line and the content should shrink to give space to the header. Is there any way to do this without using javascript? I will know the number of headers/footers ahead of time if that helps.</p> <p>This is going to be a component in a page possibly with one or more per page, for example in a 2x2 setup where each takes up a 4th of the browser window. The functionality is mainly needed as the width of the browser might change causing the header content to break a new line. This could be done pretty easily with javascript but I've always heard that <code>resize</code> event handlers are evil.</p> <p>For example if my wrapper is <code>600px</code> high, I may have 2 headers and 1 footer. Lets say the first header's content causes it to break to a new line, but the second header's doesn't. So the first headers height is <code>20px</code> where the second's is <code>10px</code>. And lets say the footer's content also causes a line break and thus has <code>20px</code> height. This gives us <code>50px</code> worth of headers and footers so now the height of the scroller should be <code>550px</code>.</p> <p>Ascii Art:</p> <pre><code> ____________________________________________ | HEADER 1 | |________breaks to new line__________________| |____________________________HEADER2_________| | | || | | || | This is my scroller | || | | || | | || | | || |_________________________________________|_|| | Some | |_____Footer_________________________________| </code></pre> <p>HTML:</p> <pre><code>&lt;div class="wrapper"&gt; &lt;div class="header"&gt; Some&lt;br/&gt; Header &lt;/div&gt; &lt;div class="scroller"&gt; Content&lt;br /&gt; Content&lt;br /&gt; Content&lt;br /&gt; Content&lt;br /&gt; ... &lt;/div&gt; &lt;div class="footer"&gt; Some&lt;br/&gt; Footer &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>body{ height:100%; } .wrapper{ height:400px; border-left:1px solid red; } .header, .footer{ background-color: #EEE; height:27px; } .scroller{ height:calc(100% - 54px); background-color: #CCC; overflow:auto; } </code></pre> <p>the red border is to show how far the wrapper goes down, so the footer doesn't show up below. I did this instead of <code>overflow: hidden</code> simply for debugging.</p> <p><a href="http://jsfiddle.net/yKTdz/4/" rel="nofollow">http://jsfiddle.net/yKTdz/4/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDon
    1. USDon
    plurals
    1. PL
      singulars
      1. LTLinked
    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. POScroller with dynamically sized headers/footers
      1. USDon
      1. VTFavorite
    2. VO
      singulars
      1. POScroller with dynamically sized headers/footers
      1. USDon
      1. VTBountyStart
    3. VO
      singulars
      1. POScroller with dynamically sized headers/footers
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSo, am i right. the wrapper must be `400px` high, the header and footer can be as big as they need inside the wrapper, so if the header and footer are both `150px` high. the content must be `100px` i don't understand what you mean when you say there will be multiple headers/footers
      singulars
      1. POScroller with dynamically sized headers/footers
      1. USiConnor
    2. COThe wrapper can be any arbitrary size, even a percentage such as 50%. By multiple headers/footer I mean there will be two different divs that represent 2 different headers that both should not scroll and should effect the height of the scroller. You have your sizes correct, but the 150px wouldn't be set, it should only reach that through expanding due to content. (I'll try to clarify more in the question)
      singulars
      1. POScroller with dynamically sized headers/footers
      1. USDon
    3. COThis is simply a variation on the fixed header/footer, fluid content theme that's been asked many times on SO (http://stackoverflow.com/questions/10474354/layout-with-fixed-header-and-footer-fixed-width-sidebar-and-flexible-content). You probably won't be able to do fixed, fluid-height headers that work in IE < 10 without JS. Got jQuery?
      singulars
      1. POScroller with dynamically sized headers/footers
      1. USisherwood
 

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