Question

我已经为我的html创建了一个页眉，正文和页脚。以下是代码：

JSFIDDLE

我让我的身体（#number）有一个红色背景，但它不会出现。我没有设置它的高度，只是将其设置为100％，因为我只是希望它填充到页面的中间。为什么红色背景不会出现？

Answer 1

如果你不在css中添加min-height属性，如：

#numbers {
  min-height:30px;
}

或

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

您还可以考虑在此div中添加空格：请参阅here

或者将背景颜色添加到#holder

Answer 2

要做到这一点，你必须设置div的所有父项的高度。添加此css -

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

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

Answer 3

＆＃13;

        #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;
        }

＆＃13;

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

＆＃13;

Answer 4

你可以使用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>

让div填写我的其余部分

4 个答案: