css中怎么样才能使内容在div的底部中间
展开全部
<html>
<head>
<title></title>
<style>
.nav{
background:blue;
width:800px;
height:50px;
margin:0 auto;
}
.content{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}
</style>
</head>
<body>
<div class="content">
<div class="nav"></div>
</div>
</body>
</html>
我不知道你要的是不是这种效果,这种效果是无论你怎么用下拉,它一直保持在那个位置,就是说它的位置是固定的,但不影响其他网页内容,就想象成是漂浮的。
position:fixed;bottom:0px;意思是,相对于浏览器窗口进行定位,离浏览器底部始终是0px。没有必要的计算。
不知道能不能帮到你。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
内容在底部中间使用绝对定位,这个时候就可以添加bottom等方法实现:
.content{
position: absolute;
bottom: 0;/* 底部距离为0 */
left:0;right:0;/* 距离左右距离相等即可造成居中 */
}
如果是整个div永远在页面的最底下,就是用固定定位
.contentBox {
position: fixed;
bottom: 0;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-05-24
展开全部
代码实现
下面先考虑HTML结构,这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度,以观察footer效果。</p> <p>这里是示例文字,DIV固定………,这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h1>Footer</h1> </DIV> </DIV> </body>
CSS代码:
程序代码
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh1{ font:20px/2Arial; margin:0; padding:010px; }
下面先考虑HTML结构,这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度,以观察footer效果。</p> <p>这里是示例文字,DIV固定………,这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h1>Footer</h1> </DIV> </DIV> </body>
CSS代码:
程序代码
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh1{ font:20px/2Arial; margin:0; padding:010px; }
追问
你这说的什么??里面怎么还有计算方式!!!能不能修改的规范一些,我看不懂!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<style type="text/css">
.main{
width:900px;
height:500px;
overflow:hidden;
position: relative;
margin:0 auto;
border:1px solid #000;
}
.bottom-center{
background: green;
width:100px;
height:100px;
position: absolute;
bottom: 0px;
left: 50%;
margin:0px 0px 0px -50px;
}
</style>
<div class="main">
<div class="bottom-center"></div>
</div>
这样就好了,margin的-50其实是根据方块儿的半径算出来的,可以改main的宽度试下
更多追问追答
追问
我的意思是这样的这是内容,如何通过css将其显示在底部中间,不要加div
追答
<body>
<div class="bottom-center">这是内容</div>
</body>
<style type="text/css">
.bottom-center{
position: absolute;
bottom: 0px;
left: 50%;
/*margin-left根据文字长度来定义*/
margin-left:-25px;
}
</style>
是这个意思吗?
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询