CODEWITHSUNDEEP
htmlcss
Harshit Laddha
Harshit Laddha

Reputation: 2124

Why body height is not 100% while using min-height property with 100% value

I have a page at 

http://uberhealth.co/register.php

I have set the property to set the min-height to 100% but still as you can see the footer is not at bottom and thus the height is not getting set to 100%. how can i fix this?

Update

I have already given there 

html, body{
   height:100%;
}

and a container class for body 

.cbody-full { min-height:100%; }

Upvotes: 0

Views: 94

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99484

Though you've set a min-height (percentage) value for the <html> element, it doesn't have a explicit height value. Hence, the min-height property is not working for the <body> element properly.

From the MDN:

min-height

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

You could set a height of 100% for the <html> element, and min-height: 100%; for the <body>.

html { height: 100%; }
body { min-height: 100%; }

Update #1

Here's my attempt to fix your layout issue.

First note that you have to specify the height of the parent element, if want to use min-height for the child element.

You have multiple wrappers inside each other, changed all the min-height: 100% declarations to height: 100% (including the html, body, ...); and use min-height: 100% for the .cbody-full > container element.

Then, you may face the vertical scrollbar. That's because the computed height of the header and the footer is added to 100% of the height of the screen (In fact the .cbody-full > container element has the height of 100%).

You could fix that, by adding a negative top/bottom margin to the .cbody-full > container element:

.cbody-full > container {
  min-height: 100%;
  margin-bottom: -50px;
  margin-top: -55px;
}

But, this cause the container goes over the header and/or the footer. In order to fix that, you could set a top/bottom padding to the container and use box-sizing: border-box to calculate the width and height of the box including the paddings and borders:

.cbody-full > container {
  min-height: 100%;
  margin-bottom: -50px;
  box-sizing: border-box;
  padding-bottom: 50px;
  margin-top: -55px;
  padding-top: 55px;
}

Just one more thing, you probably need to set z-index property for the header and footer elements, as follows:

#navbar, /* The header (navigation in this case) */
.footer { 
  position: relative;
  z-index: 100;
}

Update #2

If you consider using Ryan fait's sticky footer, note that the footer shouldn't be inside of the .cbody-full element, it should be beside that. That's why it doesn't stay at the bottom of the page.

Hence, you could change your markup as follows:

<body>
    <nav id="navbar"></nav>
    <div class="cbody-full"></div>
    <div class="footer"></div>
</body>

Then, follow the above approach for height and min-height properties, as well as position and z-index for the navigation and footer. Finally use the following for the .cbody-full element:

.cbody-full {
  min-height: 100%;
  margin-bottom: -50px;
  box-sizing: border-box;
  padding-bottom: 50px;
  margin-top: -55px;
  padding-top: 55px;
}

Upvotes: 3

rockStar
rockStar

Reputation: 1296

even if you dont put min-height:100% its always at 100%. The height is always relative to the content always given that the height is not staticcaly defined

Upvotes: 0

Related Questions