CSS DIV嵌套于各层底部

最新推荐文章于 2021-06-22 05:18:17 发布

weixin_33800463

最新推荐文章于 2021-06-22 05:18:17 发布

阅读量277

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/xldc/blog/396084

本文介绍了一种在复杂布局中实现元素固定于底部的方法。通过使用相对定位和绝对定位结合的方式，在多层div结构中确保了底部元素无论页面如何滚动都能保持其位置不变。示例代码展示了具体的CSS样式及HTML结构。

为什么80%的码农都做不了架构师？>>>

网上找了很多例子，不不可行，之后在csdn帖子中找到了，记录一下。

一定要在三层div中设置

style="position:relative;"

效果图：

CSS:

div{
border:1px solid black;
}
#content{
height:100%;
}
#left{
width:20%;
height:100%;
float:left;
position:relative;
}
#right{
width:78%;
height:100%;
float:right;
position:relative;
}
#bottom{
width:100%;
position:absolute;
bottom:0;
}

HTML:

<div id="content" name="content">
    <div id="left" name="left">
        <div id="top" name="top">图片</div>
        <div id="bottom" name="bottom">底部</div>
    </div> 
    <div id="right" name="right">右边
			<div id="top" name="top">图片</div>
			<div id="bottom" name="bottom">底部</div>
	  </div>
</div>

转载于:https://my.oschina.net/xldc/blog/396084