Databases
StackOverflow2013
Postsdbo
POCannot fix height 100% of parent using floated elements inside
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot fix height 100% of parent using floated elements inside
    primarykey
    data
    text
    <p><img src="https://i.stack.imgur.com/jzqa8.png" alt="enter image description here"> I need to fix height 100% of page-wrapper for the right-sidebar, main-contents and left sidebar. Any idea..? Below is my css file too. I have used a class named clearfix in page-wrapper but height is not fixed.The 100% is not accurate though since I need header and footer-wrapper to appear as well..</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;e-support-uop&lt;/title&gt; &lt;!-- styling files --&gt; &lt;link href="reset.css" rel="stylesheet" type="text/css" /&gt; &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="page-wrapper" class="clearfix"&gt; &lt;div id="header"&gt;0&lt;/div&gt; &lt;div id="left_sidebar"&gt; &lt;br/&gt; 1 &lt;/div&gt; &lt;!--end left_sidebar --&gt; &lt;div id="main_contents"&gt; &lt;br/&gt; 2 &lt;/div&gt; &lt;div id="right_sidebar"&gt; &lt;br/&gt; 3 &lt;/div&gt; &lt;!--close right_sidebar --&gt; &lt;div id="footer-wrapper"&gt; &lt;!-- footer --&gt; 4 &lt;/div&gt; &lt;!-- end footer --&gt; &lt;/div&gt;&lt;!--close page-wrapper--&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And here is my css file:</p> <pre><code>html, body{ margin: 0; height:100%; } html { height: 100%; } .clearfix{ min-height: 1%; _height: 1%; /*ie6*/ } .clearfix:after{ clear: both; display: block; content: ""; } body { min-height: 100%; height: 100%; background-color:#d2c7fd; font-size:14px; } #page-wrapper { position: relative; background-color: #E4E6EB; width: 800px; min-height: 80%; height: auto !important; margin: 5px auto 0; } #header { width: 800px; height: 100px; } #left_sidebar { position: relative; float: left; width: 20%; min-height: 100%; /*height: auto !important; */ height: 100%; background-color: green; word-wrap: break-word; } #main_contents { position: relative; float: left; width: 55%; height: 90%; /*height: auto !important; /* height: 100%; */ margin-left: 20px; margin-right: 20px; /*background-color: red; */ word-wrap: break-word; /*display: table-row;*/ overflow:hidden; } #right_sidebar { position: relative; float: left; width: 20%; min-height: 100%; height: auto !important; height: 100%; /*background-color: yellow; */ word-wrap: break-word; } #footer-wrapper { position:absolute; bottom:-100px; left:0; width:100%; height: 100px; background-color: #d8d8d6; border-top-style: solid; border-width: 1px; border-color: #E0E0E0; /*padding-bottom: 20px;*/ } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJohn
    1. USJohn
    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
    1. VO
      singulars
      1. POCannot fix height 100% of parent using floated elements inside
      1. USMark
      1. VTFavorite
    2. VO
      singulars
      1. POCannot fix height 100% of parent using floated elements inside
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCannot fix height 100% of parent using floated elements inside
      1. USMarc Audet
      1. VTFavorite
    1. COCan you post an image of what the layout is suppose to look like? It is not clear what you are trying to do since the HTML that you presented can be styled several ways depending on what you are trying to achieve. Thank you.
      singulars
      1. POCannot fix height 100% of parent using floated elements inside
      1. USMarc Audet
    2. COI can t Mrc Audet. Ineed at least 10 reputation....:(
      singulars
      1. POCannot fix height 100% of parent using floated elements inside
      1. USJohn
    3. COHere is the confusing point. It looks like you want: #left_sidebar, #main_contents and #right_sidebar to be 100% of the height of #page-wrapper. However, if that is the case, where are #header and #footer-wrapper suppose to go? Or do you mean the following: let #left_sidebar, #main_contents and #right_sidebar take up the vertical space of the viewport after allowing for the height of the header and footer? Please clarify your post and make it clear what you are looking for.
      singulars
      1. POCannot fix height 100% of parent using floated elements inside
      1. USMarc Audet
 

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