一笑·科奉

css 层高度自适应屏幕和将div放置在不同背景交界处的方法

作者: 一笑, 写于: 2017-12-10 11:32:11

需要实现如下需求:

1、一个div需要有两个背景色(蓝色、灰色)

2、中间灰色背景部分需要自适应到底部

3、须有一个图层放置在蓝色和灰色背景交界处,并可增加任何文字或div,且不能使用浮动层

4、导航固定在底部

4、不允许修改body的背景(因javascript单页面应用body是公用的不能随意修改,body默认背景为白色#ffffff)

效果图:

image.png

实现方法:

HTML代码

<div class="main">
    <div class="container">内容</div>
    <div class="footer-menu">footer menu</div>
</div>

1、实现一个div多个背景色(思路:利用border或者::before)

2、实现中间灰色部分自适应高度

.main {
    /* 多背景色实现(利用border) */
    border-top: 6em solid #007dc7;
    background-color: #f3f3f3;
    /* 灰色背景高度自适应 */
    position: absolute;
    top: 0px;
    bottom: 0px; /*此处最为关键*/
    left: 0px;
    width: 100%;
}

3、“漂浮”内容层

.container {
    margin-top: -5.2em; /* 顶部值来控制让层飘到蓝色border上去 */
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

4、导航固定在底部

.footer-menu {
    position:absolute;
    bottom:0;
    background-color: #dedede;
    padding: 0;
    margin: 0;
    width: 100%;
}

这样设置好css后,以上效果的框就搭建好了,再简单修剪下就可以用于项目中了。

分类: HTML5, 浏览: 203, 评论: 0
原创文章转载请注明:转自《一笑·科奉》 原文地址:https://www.kefong.com/post/82.html