我有以下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">×</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元素结束为止。为什么会这样呢?
我希望背景覆盖整个页面。这是当前正在发生的事情:
最佳答案
如上面的Deepak和timo所建议的,这应该起作用:
html, body{
height:100%;
}
#main-content {
width: 100%;
height: 100%;
background-color: #F3EFE0;
border: 1px black solid;
}
Here is the JSFiddle demo
关于html - Div标签高度问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32325711/