Let the div fill in the rest of my html

Question

I have created a header, body and footer for my html. Below is the code:

JSFIDDLE

I have made my body (#number) to have a background of red color but it won't show up. I did not set the height of it and just set it to 100% because I just want it to fill into the middle of the page. Why is it the red background won't show up?

Classic problem. There are tons of examples in the Internet about making height of block 100%, check out. Disclaimer: the parent of the element should also have height defined. — VisioN, Aug 07 '15 at 10:01
[Check out this post about 100% height][1] [1]: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — LcKjus, Aug 07 '15 at 10:06
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself.** NB - **Please don't abuse the code blocks to get around this requirement**. — Paulie_D, Aug 07 '15 at 10:16

bloC · Answer 1 · 2015-08-07T10:02:56.930

0

If you won't add a min-height attribute in css like:

#numbers {
  min-height:30px;
}

or

<div id="numbers" style="min-height:30px" class="container-fluid"></div>

you can also think about adding a space in this div: see here

or you add the background-color to your #holder

edited Aug 07 '15 at 10:02

answered Aug 07 '15 at 10:01

bloC

526
3
16

That doesn't make sense for most browsers. To have 100% height of an element, its parent should also have strictly defined height. – VisioN Aug 07 '15 at 10:02

Rohit Kumar · Answer 2 · 2015-08-07T10:13:17.420

0

To do that, you have to set the height of all the parents of the div. Add this css -

html, body, #holder {
    height: 100%;
}

https://jsfiddle.net/o5rw4b82/6/

edited Aug 07 '15 at 10:13

answered Aug 07 '15 at 10:05

Rohit Kumar

2,048
1
14
28

Why is it the red area overshot the footer? – Coolguy Aug 07 '15 at 10:08
@Coolguy because its `height` is 100% to the container, i.e. the `#holder`, to make it fit you should use this - `height: calc(100% - x)` where x is - heightOfYourTopNav(55px) plus `margin-top` or `padding-top` if any. – Rohit Kumar Aug 08 '15 at 09:37

score 0 · Answer 3 · answered Aug 07 '15 at 10:05

        #header {
          background-color: #273746;
          height: 55px;
          box-shadow: 2px 2px 2px 2px;
        }
        #numbers {
          background-color: red;
          height: 83vh;
        }
        #keypad {
          height: 30px;
          background-color: springgreen;
          text-align: center;
          box-shadow: 15px 15px 15px 15px black;
        }
        .footer {
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
        }

<div id="holder">
  <div id="header" class="container-fluid">
    <div class="navbar">
      <a href="#menu-toggle" id="menu-toggle" class="glyphicon glyphicon-menu-hamburger"></a>
      <a class="navbar-brand">Keypad <span id="counterId"></span></a>
    </div>
  </div>
  <div id="numbers" class="container-fluid">

  </div>
  <footer class="footer">
    <div id="keypad" class="container-fluid">
      <a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
                </a>
    </div>
  </footer>
</div>

Set the height to 83vh? But then if different device will need different height? — Coolguy, Aug 07 '15 at 10:10
sorry make it 100vh it will take the complete height of the remaining page — imGaurav, Aug 07 '15 at 10:12

score 0 · Answer 4 · answered Aug 07 '15 at 10:18

You can do this nicely with flexbox

#header{ background-color: #273746 ; height:55px; box-shadow: 2px 2px 2px 2px;}
#numbers{background-color: red; flex-grow:1; }
#keypad{height:30px;background-color: springgreen; text-align: center; box-shadow: 15px 15px 15px 15px black;}
#holder {
  height:100vh;
  display:flex;
  flew-wrap:wrap;
  flex-direction:column;
}
body {
  margin:0;
  }

      <div id="holder">
        <div id="header" class="container-fluid">
            <div class="navbar">
                <a href="#menu-toggle" id="menu-toggle" class="glyphicon glyphicon-menu-hamburger"></a>    
                <a class="navbar-brand">Keypad <span id="counterId"></span></a>
            </div>
        </div>
        <div id="numbers" class="container-fluid">

        </div>
        <footer class="footer">
            <div id="keypad" class="container-fluid">
                <a href="#keypad-toggle" id="keypad-toggle"><span class="glyphicon glyphicon-th"></span> Number Pad
                </a>
            </div>
        </footer>
</div>

Let the div fill in the rest of my html

4 Answers4