CODEWITHSUNDEEP
csshtmlheight
Nikk
Nikk

Reputation: 7921

height: 100%; Won't Work

I can't get the following elements to extend their height to 100%.

If I don't have the text in there. They won't be visible at all. Not exactly sure why this might be.

Take a look FIDDLE

HTML

<figure class="left clearfix">LEFT</figure>
<figure class="middle">MID</figure>
<figure class="right clearfix">RIGHT</figure>

CSS

    html body figure.left {
    position: relative;

    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);

    height: 100%;
    margin: 0;
    clear: none;
    float: left;
    display: block;
    overflow: hidden;

    background-color: gray; 
}

    html body figure.right {
    position: relative;

    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);

    height: 100%;
    margin: 0;
    clear: none;
    float: left;
    display: block;
    overflow: hidden;

    background-color: orange;   
}

    html body figure.middle {
    position: relative;

    width: 40px;
    height: 100%;

    margin: 0;
    clear: none;
    float: left;
    display: block;
    overflow: hidden;

    background-color: black;
}

Thanks.

Upvotes: 0

Views: 146

Answers (2)

Kaushal
Kaushal

Reputation: 675

Please try this (http://jsfiddle.net/3MRt6/)

html, body, div.grid-container {
width: 100%;
    height: 100%;
padding: 0;
margin: auto;
clear: none;
float: none;
margin: auto;
}

figure.left {
position: relative;

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

height: 100%;
margin: 0;
clear: none;
float: left;
display: block;
overflow: hidden;

background-color: gray; 
}

figure.right {
position: relative;

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

height: 100%;
margin: 0;
clear: none;
float: left;
display: block;
overflow: hidden;

background-color: orange;   
}

 figure.middle {
position: relative;

width: 40px;
height: 100%;

margin: 0;
clear: none;
float: left;
display: block;
overflow: hidden;

background-color: black;
}

Upvotes: 0

jordana-morais
jordana-morais

Reputation: 96

Define a "height" to your grid-container

html body div.grid-container {
  width: 100%;
  height: 20px; //a height value to your grid container
  padding: 0;
  margin: auto;
  clear: none;
  float: none;
  margin: auto;
}

and all you need is define height: inherit; to "html body figure.left {}" and "html body figure.right {}"

Upvotes: 1

Related Questions