Databases
StackOverflow2013
Postsdbo
POHow do I position a button in a responsive layout, in an area that has no fixed height and position:absolute? (UPDATE)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I position a button in a responsive layout, in an area that has no fixed height and position:absolute? (UPDATE)
    primarykey
    data
    text
    <p>Here's a <strong>UPDATED</strong> fiddle with my layout: <a href="http://jsfiddle.net/RDmN4/24/" rel="nofollow">http://jsfiddle.net/RDmN4/24/</a></p> <p>HTML:</p> <pre><code>&lt;div id="container"&gt; &lt;div id="header"&gt;header goes here&lt;/div&gt; &lt;/div&gt; &lt;div id="flexible_height"&gt; &lt;!-- what i can't figure out --&gt; &lt;a class="button" href="#" title=""&gt;button&lt;/a&gt; &lt;/div&gt; &lt;div id="test"&gt; &lt;p&gt;lorem ipsum, 2 or 3 paragraphs go here&lt;/p&gt; &lt;/div&gt; &lt;div id="footer"&gt;footer goes here&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#container { width:100%; max-width:100%; position:absolute; z-index:1; bottom:28px; top:0; left:0; background:grey; /* just to identify area */ } #header { height:42px; background:green; /* just to identify area */ } #footer { width:100%; max-width:100%; position:absolute; z-index:2; bottom:0; left:0; height:28px; background:blue; /* just to identify area */ } #test { width:100%; max-width:100%; position:absolute; z-index:2; bottom:28px; left:0; background:white; /* just to identify area */ } #flexible_height { position:absolute; top:42px; left:0; z-index:2; width:100%; } .button { width:100px; padding:10px 0; text-align:center; display:block; background: red; /* just to identify button */ } </code></pre> <p>The button should be positioned in the center of the grey area (container) horizontally and vertically but also remain there when the resolution changes and the white area (test) changes the height (which is not fixed). I just can't figure out how to keep that button between the header and the test div even if the width and the height of the viewport changes (yes, it's a layout for a mobile website) ... I assume there should be a way to do it, probably with javascript, but i don't know how to do it ... Any help would be appreciated!</p> <p>PS: I can't modify the html structure in any way. i can only move the button around, in and out of divs.</p> <p><strong>EDIT</strong>: I created <strong>a new div</strong> - #flexible_height. Now that the button is inside that div I can use position:absolute; top:0; left:0; right:0; bottom:0 on it ONLY IF somehow I calculate the <strong>dynamic height of the div</strong>. I am new to javascript and haven't figured out a way to do it. Any ideas? Thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USandreib
    1. USandreib
    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
    2. PO
      singulars
      1. PTAnswer
    3. 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