Databases
StackOverflow2013
Postsdbo
POSticky top div with absolute positioning
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSticky top div with absolute positioning
    primarykey
    data
    text
    <p>I'm using absolute positioning to have a div fill up the entire browser window. However, I wan't to combine this with a sticky div that sometimes is there and sometimes not.</p> <p>To make things a little clearer, check out this jsFiddle: <a href="http://jsfiddle.net/henrikandersson/aDdRS/" rel="nofollow noreferrer">http://jsfiddle.net/henrikandersson/aDdRS/</a></p> <p>I want the "top", "left" and "subheader" to stay where they are at all times. I also want the "content" div to fill up what is left of the window. However, sometimes I want to display the "alert" div before "content". So far so good, as you can see in the jsFiddle. But, I want "alert" to stick to the "subheader" and stay there when scrolling. As you can see if you resize the window, "alert" will now be scrolled along with "content" - I don't want it to be.</p> <p>Anyone got an idea of how to solve this?</p> <p>EDIT: I made a change in my jsFiddle, I placed the "alert" where it should be (between subheader and content-area). As you can see ( <a href="http://jsfiddle.net/henrikandersson/aDdRS/12" rel="nofollow noreferrer">http://jsfiddle.net/henrikandersson/aDdRS/12</a> ) it does not push the "content-area" down since content-area has top:20px. And I can't set top:40px for example since "alert" should be able to vary in height and I want content-area to have the same css with or without the alert above.</p> <p>EDIT #2: This question deals with the same problem, but there is no solution for that question either. Seems like it's not possible without using JavaScript: <a href="https://stackoverflow.com/questions/4926485/variable-height-scrolling-div-positioned-relative-to-variable-height-sibling">variable height scrolling div, positioned relative to variable height sibling</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USHenrik Andersson
    plurals
    1. PL
      singulars
      1. LTLinked
    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
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWould it be possible to have the `<div id="alert"></div>` to be not there, if it is empty, or in other words, just print this div, if it has a content?
      singulars
      1. POSticky top div with absolute positioning
      1. USHerrSerker
    2. CO@HerrSerker yes, it should be possible to hide/display the div, but this is kind of part of the problem (see edit above)
      singulars
      1. POSticky top div with absolute positioning
      1. USHenrik Andersson
    3. COI mean not hide/display with CSS, but fully remove it from source code id empty? If so, me edited fiddel fits your needs, if not, it fits your needs in browsers with supprt for `:empty` pseudo-class
      singulars
      1. POSticky top div with absolute positioning
      1. USHerrSerker
 

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