Header/Footer Layout with 100% Content Height in IE8

HTML/CSS - No 100% height on div in IE

Try this:

#content_1{
width:200px;
background-color:black;
height:100%;
position: absolute;
}

IE 7 and below assign a value called "hasLayout" to elements that need positioning. Sometimes to work out little quirks like this you have to force an item to have a layout which in this case means setting its position to absolute.

CSS - 100% Height with Header and Footer

Using CSS3 Flexbox:

/*QuickReset*/*{margin:0;box-sizing:border-box;}

body {                /* body - or any parent wrapper */

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

main {

  flex: 1;

}

<header>HEADER</header>

<main>MAIN</main>

<footer>FOOTER</footer>

IE8 layout with min-height and border-box

After reading once more this sticky footer post on CSS-tricks and tinkering a bit, I found a clean solution that doesn't require any markup changes (you can do with only 3 containers: header, main and a footer) nor using box-sizing at all. It works in IE8 just as well.

html,
body {
  height: 100%;
  margin: 0;
}

#header,
#footer {
  height: 100px;
}

#header {
  margin-bottom: -100px;
}

#footer {
  margin-top: -100px;
}

#main {
  min-height: 100%;
  width: 300px;
  margin: 0 auto;
}

/* Space for header and footer. */
#main:before,
#main:after {
  display: block;
  content: "";
  height: 100px;
}

You may like to apply the margins to main instead of header and footer.

Here's my fiddle with this solution applied: http://jsfiddle.net/ttKP3/1/

How to make 100% div height between header and footer?

You DO need to change BODY to height:100%;

working demo

css

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; height: 100%;
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    min-height:calc(100% - 110px);
}

*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.

How to have footer and header be 100% browser width, but keep everything in between at 80%

IMHO flexbox is the way to go, but since Micheal_B got that covered, I'll demonstrate basic positioning and hodgepodge of other styling.

I usually start with the body which should set the pace for the rest of the layout goes. I saw that the body was 80%, I can say with 99% confidence that limiting the dimensions of the body is never done.

One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.One thing that worked for me was changing 100% to 100vw but not understanding why 100% isn't working.

100% length (i.e. width or height) means it is 100% of the element's parent (i.e. the element that contains the element in question). So if you set 100% on the header for example, you are telling the browser, "Make the header's height 100% of the body's width." Even though it sounds logical, it's not treating the body as it's parent, it's actually referring to the html element. I won't go into the gory details so read this article. It sounds very counter-intuitive so I always apply position: relative to the body which makes it's dimensions referenced to the viewport (the edges of the actual screen). When you noticed how 100vh was effective as where 100% wasn't, it's because vh and vw measurements are always referenced to the viewport just like the html element and just like the body when it's position: relative.

@font-face{

font-family:Bebas;

 src:url(BEBAS.TTF);

}

body {

  position: relative;

  width: 100vw;

  margin: 0 auto;

  height: 100vh;

  background: blue;

  overflow: hidden;

}

.header {

  top: 0;

  position: absolute;

  left: 0;

  right: 0;

  background: #ff6200;

  height: 10%;

  width: 100%;

  color: white;

  font-family: Bebas;

}

.header .call {

  line-height: 100%;

  vertical-align: middle;

}

.navbar {

  position: absolute;

  top: 10%;

  left: 0;

}

.row {

  width: 80%;

  background: red;

  margin: 0 auto;

  height: 80%;

  position: absolute;

  top: 10%;

  bottom: 10%;

  left: 10%;

  right: 10%;

}

.footer {

  width: 100%;

  height: 10%;

  background: green;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}

.callme {

  font-variant: small-caps;

  font-style: normal;

  font-size: 20px;

  font-weight: 900;

  color: #fc4;

}

.col-md-8 {

  width: 66%;

  height: 100%;

  display: inline-block;

  border-right: 3px dashed black;

}

.col-md-4 {

  width: 33%;

  height: 100%;

  display: inline-block;

}

section {

  text-align: center;

}

<header class="header">

  <address class="call">

<span class="callme">Call us now!</span> 

<span class="number">777.77.7777.777</span> 

</address>

</header>

<nav class="navbar">

  <span>logo</span>

</nav>

<main class="row">

  <section class="col-md-8">.col-md-8</section>

  <section class="col-md-4">.col-md-4</section>

</main>

<footer class="footer"></footer>

Get div to take up 100% body height, minus fixed-height header and footer

this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change header and footer into divs):

Fiddle

html,

body {

  min-height: 100%;

  padding: 0;

  margin: 0;

}

#wrapper {

  padding: 50px 0;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

}

#content {

  min-height: 100%;

  background-color: green;

}

header {

  margin-top: -50px;

  height: 50px;

  background-color: red;

}

footer {

  margin-bottom: -50px;

  height: 50px;

  background-color: red;

}

p {

  margin: 0;

  padding: 0 0 1em 0;

}

<div id="wrapper">

  <header>dfs</header>

  <div id="content">

  </div>

  <footer>sdf</footer>

</div>

IE 10 bug with display table CSS when height is 100%?

After spending a few days on this question, it seems that for this specific layout (especially the 100% height), using tables is the best option. Those 3 different threads with different twist of the question were unable to get results (so I suspect that this IE bug is one reason to keep using tables in 2014):

• IE 10 bug with display table CSS when height is 100%?

• Header/Footer Layout with 100% Content Height in IE8

• Tableless Table Layout in IE8

By reading more about tables and SEO, I was also unable to find any relevant information or tangible data that using a single table would have any impact at all. The only tangible information I was able to find is that tables will only display once the full HTML has been downloaded in the client. Which again is not a big issue in 2014 considering the HTML's size in the overall size of a web page. CSS can be used for all of the table's style which solves some of the other complains I saw about tables. This article probably reflects best the situation here:

http://olav.dk/articles/tables.html

Tables in 2014 might be ok :)

---

Related Topics