页脚不在Content下面定位(浮点布局)
页脚不在Content下面定位(浮点布局)
提问于 2015-09-06 16:44:57
HTML
<body>
<div id="Wrapper">
<div id="Header_Wrapper">
<div id="Menu_Wrapper">
<?php include( 'menu.php');?>
</div>
<div id="GuardSpace_Wrapper"></div>
</div>
<div id="Content_Wrapper">
<div class="row">
<div class="col-lg-2 col-xs-12 col-sm-2 ">
<div id="AdminLeftMenu">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
<div class="col-lg-8 col-xs-12 col-sm-8 ">
<div id="Content">
<?php include($page_content);?>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="col-lg-2 col-xs-12 col-sm-2 ">
<div id="AdminRightMenu">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="Footer_Wrapper">
<?php include( 'footer.php');?>
</div>
</div>
a
</body>CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#Wrapper {
height: 100%;
width: 100%;
background: #fff;
}
#Header_Wrapper {
position:relative;
height:20%;
width: 100%;
background: #089de3;
float:left;
}
#Menu_Wrapper {
height:80%;
width: 100%;
}
#GuardSpace_Wrapper {
height:20%;
width: 100%;
background: #f5f5f5;
}
#Content_Wrapper {
position:relative;
height:60%;
width: 100%;
background: #fff;
float:left;
-webkit-box-shadow: -4px 8px 31px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -4px 8px 31px 5px rgba(0, 0, 0, 0.75);
box-shadow: -4px 8px 31px 5px rgba(0, 0, 0, 0.75);
}
#Footer_Wrapper {
position:relative;
bottom:0;
height:20%;
width: 100%;
background: #333;
float:left;
}
#AdminLeftMenu{
width:100%;
height:100%;
}
#AdminRightMenu{
width:100%;
height:100%;
}小提琴当页面的网格大小小于720 is或480 px.The页脚以上时，网格大小小于720 is的Content_Wrapper.The包装器高度小于子元素.Is的总高度，任何内容都可以适应。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32425909
复制相关文章
相似问题
腾讯云开发者
