html - div标签高度问题

Question

我有以下 div 标签:(更多 html 的容器)

这是最外层的div标签。

<div id="top">
    <h1 style="float:left;margin:0;font-family:Impact;color:#9A3334;border:0px;padding:0px;">EasyCounter</h1>
    <label style="float:left;margin-left:10px;">
        <meteor-include src="loginButtons" style="color:black;font-size:14pt;"></meteor-include>
    </label>
</div>
<div id="main-content">

    <div id="left">
        <button id="meal-button" data-toggle="modal" data-target="#myModal" data-backdrop="static">Add Meal</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!--1-->
            <div class="modal-dialog" role="document"> <!--2-->
                <div class="modal-content" ng-controller="formCtrl"> <!--3-->
                    <div class="modal-header"> <!--4-->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="clear()"><span aria-hidden="true">&times;</span></button>
                        <h2 class="modal-title" id="myModalLabel">Meal</h2>
                    </div> <!--/4-->

                    <div class="modal-body"> <!--5-->
                        <label>Description :
                            <input type="text" ng-model="meal.description">
                        </label>
                        <div ng-repeat="item in meal.items"> <!--6-->
                            <label>Item {{$index+1}} :
                                <input type="text" class="item" ng-model="item.name"><br>
                            </label>
                            <label>Calories :
                                <input type="number" class="calories" ng-model="item.cal"><br>
                            </label>
                            <br>
                        </div> <!--/6-->

                    <div class="modal-footer"> <!--7-->
                        <button ng-click="clear()" style="box-shadow:none;outline:none;" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button ng-click="submit()" class="btn btn-primary" id="submit">Submit</button>
                        <button ng-click="addItem()" class="btn btn-primary">+Item</button>
                    </div> <!--/7-->

                </div> <!--/5-->
             </div> <!--/3-->
          </div> <!--/2-->
        </div><!--/1-->
        <!--/Modal-->

    </div> <!--/left-->

    <div id="right" ng-controller="resultCtrl">
        <label id="date">
            Today's Date : {{todayDate}}
        </label>
    </div>

</div><!--/main-content-->

这是我的 CSS:

html,body {
 font-family: "garamond";
 height: 100%;
}

#top {
  width: 100%;
  height: 50px;
  background-color: #3399FF;
}

#main-content {
  width: 100%;
  height: 100%;
  background-color: #F3EFE0;
  border: 5px white solid;
}

#left {
  margin-top:100px;
  margin-left: 170px;
  height: 100%;
  width: 150px;
  text-align: center;
}

#right {
  margin-top: -50px;
  margin-left: 650px;
  height: 100%;
  width: 550px;
}

#meal-button {
  width: 250px;
  height: 50px;
  background-color: #217C7E;
  border-color:transparent;
  font-size: 25px;
  border-radius: 5px;
  font-family: "garamond";
  font-weight: bold;
  box-shadow: none;
  display: inline;
  color: white;
}

#date {
  text-align:center;
  font-family:garamond;
  font-size:25pt;
  color:white;
  height:50px;
  width:550px;
  border-radius: 5px;
  background-color: #9A3334;
}

我的应用程序基本上将包含一个表格，该表格会随着用户向其中添加数据而变得越来越长。我认为下面的 CSS 可以工作，我设置了一个边框只是为了测试的视觉效果，但出于某种原因，它没有覆盖整个页面。直到 main-content 容器内的 HTML 元素结束。为什么会这样？

我想让背景覆盖整个页面。这是目前正在发生的事情:

Answer 1

正如上面 Deepak 和 timo 所建议的，这应该可行:

html, body{
    height:100%;
}
#main-content {
  width: 100%;
  height: 100%;
  background-color: #F3EFE0;
  border: 1px black solid;
}

Here is the JSFiddle demo