CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 337

Cannot fix height 100% of parent using floated elements inside

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..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>e-support-uop</title>

    <!-- styling files  -->

    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
    <div id="page-wrapper" class="clearfix">
        <div id="header">0</div>
        <div id="left_sidebar">
            <br/>
            1
        </div> <!--end left_sidebar -->

        <div id="main_contents">
            <br/>
            2
        </div>
        <div id="right_sidebar">
            <br/>
            3
        </div> <!--close right_sidebar -->
        <div id="footer-wrapper"> <!-- footer -->
            4
        </div> <!-- end footer -->
    </div><!--close page-wrapper-->
</body>

</html>

And here is my css file:

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;*/
}

Upvotes: 3

Views: 2208

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

Here is one way of doing it.

I made a slight modification to your HTML by adding a .main-wrap to wrap the floats.

<div id="page-wrapper">
    <div id="header">0</div>
    <div id="main-wrap">
        <div id="left_sidebar">1</div><!--end left_sidebar -->
        <div id="main_contents">2</div>
        <div id="right_sidebar">3</div><!--end right_sidebar -->
    </div><!-- end main-wrap -->
    <div id="footer-wrapper">4</div><!-- end footer -->
</div><!--close page-wrapper-->

and here is the CSS:

html, body {
    height: 100%;
}
body {
    margin: 0;
}
#page-wrapper {
    height: 100%;
    min-height: 300px; /* optional */
    width: 800px;
    margin: 0 auto;
    position: relative;
}
#header {
    position: relative;
    top: 5px;
    height: 100px;
    background-color: pink;
 }
#main-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 105px;
    bottom: 100px;
    background-color: yellow;
}

#left_sidebar {
    float: left;
    width: 20%;
    height: 100%;
    background-color: green;
}

#main_contents {
    float: left;
    width: 55%;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    background-color: red;
}

#right_sidebar {
    float: left;
    width: 20%;
    height: 100%;
    background-color: lightblue;
}

#footer-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #d8d8d6;
}

See demo fiddle at: http://jsfiddle.net/audetwebdesign/xMNUv/

The trick is to extend the #page-wrapper to the full height of the view port. Set the top and bottom margin to zero to prevent vertical scrolling.

The #header and #footer-wrapper are both 100px in height, so you can now use absolute positioning to stretch the main-wrap to fill up the space between the header and footer elements.

You can use position: relative on the header to open up some white space on top if you need it.

Within the #main-wrap, you can now float your sidebars and content elements to form a 3-column layout. Apply height: 100% to get the floated elements to fill up the #main-wrap height.

You may want to add a minimum height value to #page-wrapper to prevent the columns from collapsing.

Depending on your content, your floated columns may overflow since their height is constrained by the height of the view port. You may want to add overflow: auto to the floated elements as needed.

Upvotes: 1

&#193;lvaro Mart&#237;nez
&#193;lvaro Mart&#237;nez

Reputation: 1047

You cannot do this unless you set a fixed height on the parent element, which probably you don't want.

If you don't care about IE 7 and below, you might want to use

display: table-cell

Working example: http://codepen.io/anon/pen/fikct

Upvotes: 0

Related Questions