Div tag height issue

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 будет работать, и я установил границу только для визуального плюс для тестирования ради, и по какой-то причине он не охватывал всю страницу. Только до конца моих HTML-элементов внутри контейнера основного содержимого. Почему это происходит?

Я хочу, чтобы фон охватывал всю страницу. Это то, что происходит в данный момент:

Answer 1

Как уже предлагалось Дипак и Timo выше, это должно работать:

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

Here is the JSFiddle demo

Answer 2

Попробуйте добавить это в bootom вашей HTML страницы непосредственно перед где заканчивается ваш body tag -

<script>  
    var canvasHeight = $(window).height();  
    $(document).ready(function(){  
     $('#main-content').css('min-height', canvasHeight)  
    });  
</script>