本站停止维护,已转移至laravel学习网;欢迎大家移步访问!

html5+css3让div自适应屏幕并且滚动

最近简书,堆糖这些网站火得不行,她的一些设计让我们觉得眼前一亮,我这里来为你解读一下它们一些板块的布局

  1. div可以滚动,以前人们常常iframe来实现这个功能,内容超过了固定高度就会滚动,但是,iframe需要查询建立一个页面,其次,iframe对seo以及性能都很渣,很多人都已经放弃了,其实,你只需要把div设置一个固定高度宽度,然后设置overflow:auto;就能做到超出内容自动滚动了,对seo也没什么影响:

overflow:auto;

  2.左边固定的一个图片,其实他就运用了一个postion:absoult;属性而已,然后定义背景图宽度自定义,高度100%,就可以了,给一个参考案例

css中

.pg-sidebar {
    width: 250px;
    height: 100%;
    padding: 86px 26px 0 27px;
    background-image: url(img/20160504182557.png);
    background-size: 100% 100%;
    background-position: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    position: absolute;
    background-color: #666666;
    z-index: 9;
}
.pg-sidebar p {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

html中

<div class="pg-sidebar">
        <div style="position: absolute;bottom: 81px;">
            <p class="pg-desc">
            谓心之所思,<br>
            见利不诱,见害不惧,<br>
            宽舒而仁,独乐其身,<br>
            是谓云气,意行似天。<br>
            意行曳杖随所骋,遥林红叶纷相请。<br>
            意行无人非,骏发不中休。
            </p>
            <div style="width: 77px;height: 1px;background: #fd8284;margin-top: 8px;"></div>
            <p class="pg-title"><img style="width: 159px;" src="img/20160429150632_WJhsm.png"></p>
        </div>
    </div>

好,我们看看效果

屏幕快照-2016-08-28-下午10.26.08.png

转载请注明 :一沙网络原文出处:http://bbs.earnp.com/article/146
问题交流群 :562864481
7
打赏
发布时间 :2016-08-28 22:27:42
分享

2 个评论

  • 一沙
    回复
    2016-12-03 14:33
    回复 无名氏

    哈哈,是啊

  • 无名氏
    回复
    2016-08-29 23:53
    怪不得热门APP那么火,原来全靠板块简洁美观。我也要学一学才行。学无止境,哈哈哈。。。。。

要回复文章请先登录注册