Databases
StackOverflow2013
Postsdbo
POList container with three parts, want the middle to expand to fill height
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POList container with three parts, want the middle to expand to fill height
    primarykey
    data
    text
    <p>I have a container made of a header, a body and footer. Header needs to be able to move a bit (which seems to work fine by setting a max height), body quite a bit more, and my footer is a fixed height. The overall mapsidebar container can not grow to more of 400px and when that happens i would like to have the header and footer always visible, and the body having a scroll bar appearing.</p> <p>I'm having issues having the body expand to fill the height of the container. Any help would be greatly appreciated. I'm a bit new to SA so I always hope I provided enough information.</p> <p>A note on the behaviour, the listofplaces gets populated by user generated content so it can be one list item or 20.</p> <p>Here is my HTML:</p> <pre><code>&lt;div id="mapsidebar"&gt; &lt;div id="listheader"&gt; &lt;div id="mapTitleLbl" tabindex="2"&gt;Untitled Map&lt;/div&gt; &lt;input id="mapTitleInput" type="text" maxlength="45" tabindex="-1"/&gt; &lt;div id="mapDescriptionLbl" tabindex="3"&gt;Map Description&lt;/div&gt; &lt;textarea id="mapDescriptionInput"rows="4" cols="4" maxlength="130" tabindex="-1"&gt; &lt;/textarea&gt; &lt;/div&gt; &lt;div id="listbody"&gt; &lt;div class="places"&gt;&lt;ol id="listofplaces"&gt;&lt;/ol&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="listfooter"&gt; &lt;div id="count"&gt;&lt;font id="countView" weight="bold"&gt;0&lt;/font&gt; views &lt;/div&gt; &lt;div id="share"&gt; &lt;div id="zerocopydiv" title="Copy map link to your clipboard"&gt;&lt;/div&gt; &lt;a id="facebookpopup" title="Share to facebook" href=""&gt;&lt;/a&gt; &lt;a id="twitterpopup" title="Share to twitter" href=""&gt;&lt;/a&gt; &lt;div id="sharetext"&gt;Share this map&lt;/div&gt; &lt;/div&gt; &lt;div id="lockPanel"&gt; &lt;div id="unlockable"&gt;This map is editable by everyone.&lt;/div&gt; &lt;div id ="unlock"&gt;&lt;a id="lockcheck" href="" title="Lock/Unlock this map" onclick="javascript:onUnlockClick();return false;"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is the CSS:</p> <pre><code>#mapsidebar { position: absolute; top: 215px; right: 0px; background-color: #fff; color: #41414C; font-size: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 0 1px #bab9b9; -webkit-box-shadow: 0 0 1px #bab9b9; box-shadow: 0 0 1px #bab9b9; overflow: auto; padding: 0; opacity: 0.95; width: 200px; border: 3px solid #E6E6E6;} #listheader{ max-height: 168px; width: 100%; font-size: 12px; text-align: left; border-bottom: 1px dashed #e6e6e6; overflow-y: scroll;} #listbody{ min-height:150px; height: auto; overflow: auto;} .places{ overflow-y: scroll;} #listofplaces, #listofplaces li{ padding: 0px 0px 5px; margin: 0 0 0 14px;} #listfooter { position: absolute; bottom: 0; width: 100%; height: 90px;} </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USficho
    1. USficho
    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. COLook at this http://jsfiddle.net/afshinprofe/G4uEj/
      singulars
      1. POList container with three parts, want the middle to expand to fill height
      1. USAfshin
    2. COHi Afshin and thank you for your answer. I clarified my question, I need to mapsidebar's height to hit a max of 400px and when that happens, the listbody being the one growing, to show a sidebar to accomodate for that. Is it doable? Thanks!
      singulars
      1. POList container with three parts, want the middle to expand to fill height
      1. USficho
 

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