Databases
StackOverflow2013
Postsdbo
PO100% height for a absoulutely positioned child div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO100% height for a absoulutely positioned child div
    text
    copied!<p>I'm making a navigation where the children will be showed in a different box, much like <a href="http://www.boffi.com/EN/Collections/bathrooms/b14.aspx" rel="nofollow">http://www.boffi.com/EN/Collections/bathrooms/b14.aspx</a> . I managed to separate the child using absolute positioning, but can't get the child elements background to have a 100% height. it's a list element, so if I put height: 100% , the bottom two main navigation elements dissapears. Please help! Here's my html: </p> <pre><code>&lt;ul id="mainmenu"&gt; &lt;li id="liHome" class="active"&gt; &lt;a href="#item-x1y1" class="panel" rel="none" id="Home"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li id="liServices" class=" "&gt; &lt;a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services"&gt;Services&lt;/a&gt; &lt;div class="child"&gt; &lt;ul style="" id="SubMenuY2" class="submenu"&gt; &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;li id="liEnvironment"&gt; &lt;a href="#item-x1y3" class="panel" rel="none" id="Environment"&gt;Environment&lt;/a&gt; &lt;/li&gt; &lt;li id="liCareer"&gt; &lt;a href="#item-x1y4" class="panel" rel="none" id="Career"&gt;Career&lt;/a&gt; &lt;/li&gt; &lt;li id="liContact"&gt; &lt;a href="#item-x1y5" class="panel" rel="none" id="Contact"&gt;Contact&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>and the css</p> <pre><code>body, html{ height:100%; } #mainmenu{ background:black; color: white; width:130px; position:relative; top:0; height:100% } #mainmenu li a { color:white; } ul.submenu{ position:absolute; background:blue; width:130px; } div.child{ position:relative; margin-left:130px; } </code></pre> <p>Thanks a lot for the help.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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