css布局，左边的滚动时右边不随着滚动

本文转载自查看原文 2018-11-14 14:45 868 css

https://www.cnblogs.com/xiaominsweet/p/9186986.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="stylesheet" type="text/css" href="./css/brand-table.css">
</head>
<body >
    <div class="brand-table">
        <div class="header">
            <a href=""></a>
            <div>商标分类表</div>
        </div>
        <div class="tip">
            <img src="./images/tip.png" alt="">
        </div>
        <div class="section">
            <ul class="left">        
                <li class="active"><a href="">第1类</a></li>
                <li><a href="">第2类</a></li>
                <li><a href="">第3类</a></li>
                <li><a href="">第4类</a></li>
                <li><a href="">第5类</a></li>
                <li><a href="">第6类</a></li>
                <li><a href="">第7类</a></li>
                <li><a href="">第8类</a></li>
                <li><a href="">第9类</a></li>
                <li><a href="">第10类</a></li>
                <li><a href="">第11类</a></li>
                <li><a href="">第12类</a></li>
                <li><a href="">第13类</a></li>
                <li><a href="">第14类</a></li>
                <li><a href="">第15类</a></li>
                <li><a href="">第16类</a></li>
                <li><a href="">第17类</a></li>
                <li><a href="">第18类</a></li>
                <li><a href="">第19类</a></li>
                <li><a href="">第20类</a></li>
                <li><a href="">第21类</a></li>
                <li><a href="">第22类</a></li>
                <li><a href="">第23类</a></li>
                <li><a href="">第24类</a></li>
                <li><a href="">第25类</a></li>
                <li><a href="">第26类</a></li>
                <li><a href="">第27类</a></li>
                <li><a href="">第28类</a></li>
                <li><a href="">第29类</a></li>
                <li><a href="">第30类</a></li>
                <li><a href="">第31类</a></li>
                <li><a href="">第32类</a></li>
                <li><a href="">第33类</a></li>
                <li><a href="">第34类</a></li>
                <li><a href="">第35类</a></li>
                <li><a href="">第36类</a></li>
                <li><a href="">第37类</a></li>
                <li><a href="">第38类</a></li>
                <li><a href="">第39类</a></li>
                <li><a href="">第40类</a></li>
                <li><a href="">第41类</a></li>
                <li><a href="">第42类</a></li>
                <li><a href="">第43类</a></li>
                <li><a href="">第44类</a></li>
                <li><a href="">第45类</a></li>
            </ul>
            <div class="right">
                <div class="title">
                    <span class="title-name">
                        01类化学原料
                    </span>
                    <span class="all tobottom">
                        全部
                    </span>
                </div>
                <div class="detail">
                    用于工业、科学、摄影、农业、园艺和林业的化学品；未加工人造合成树脂；未加工塑料物质；肥料；灭火用合成...
                    第一类主要包括用于工业、科学和农业的化学制品，包括用于制造属于其他类别的产品的化学制品。本类尤其包括：——堆肥； ——非食品防腐盐。 ——某些特定的食品工业用添加剂（查阅按字母顺序排列的商品分类表）。 本类尤其不包括： ——未加工的天然树脂（第二类）； ——医学科学用化学制品（第五类）； ——杀真菌剂、除莠剂和消灭有害动物制剂（第五类）； ——文具用或家用粘合剂（第十六类）； ——食品用防腐盐（第三十类）； ——褥草（腐殖土的覆盖物）（第三十一类）。
                </div>
                <div class="child-box">
                        <div class="child-type">
                                <a href="">
                                     【0101】 工业气体,单质
                                </a>
                         </div>
                        <div class="child-type">
                                <a href="">
                                     【0101】 工业气体,单质
                                </a>
                         </div>
                        <div class="child-type">
                                <a href="">
                                     【0101】 工业气体,单质
                                </a>
                         </div>
                        <div class="child-type">
                                <a href="">
                                     【0101】 工业气体,单质
                                </a>
                         </div>
                        <div class="child-type">
                                <a href="">
                                     【0101】 工业气体,单质
                                </a>
                        </div>
                </div>
                <div class="recommend">
                    <span class="recommend-name">
                            第01类化学燃料
                    </span>
                    转让推荐
                </div>
                <ul class="brandlist">
                    <li>
                            <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商标转让">
                                <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉尔缇商标">                            </a>
                    </li>
                    <li>
                            <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商标转让">
                                <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉尔缇商标">                            </a>
                    </li>
                    <li>
                            <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商标转让">
                                <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉尔缇商标">                            </a>
                    </li>
                    <li>
                            <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商标转让">
                                <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉尔缇商标">                            </a>
                    </li>
                    <li>
                            <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商标转让">
                                <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉尔缇商标">                            </a>
                    </li>
                    <li>
                            <a href="/sbeliteinfo-248.html" data-pid="740475" onclick="my_hmt_push(['_trackEvent', 'wap_jpsblist','wap_jpsblist_248', 'click']);return total(this);" class="sb_img" title="仙客家商标转让">
                                <img src="http://pic.86sb.com/uploads/Brand_sb/2380126425.jpg?1" alt="拉尔缇商标">                            </a>
                    </li>
                </ul>
            </div>
            <script>
                $('.right').on('click',".all",function(){
                    if($(this).hasClass("tobottom")){
                        $('.detail').css("-webkit-line-clamp","inherit");
                        $(this).addClass('totop').removeClass("tobottom"); 
                    }else{
                        $(this).addClass('tobottom').removeClass("totop"); 
                        $('.detail').css("-webkit-line-clamp","3");
                    }
                })
            </script>
        </div>
    </div>
</body>
</html>

html, body {
  height: 100%;
  background: #f7f7f7 !important;
}

button {
  outline: none;
  border: none;
  background: none;
}

.brand-table .header {
  height: 1.1rem;
  width: 100%;
  line-height: 1.1rem;
  font-size: .38rem;
  color: #181818;
  text-align: center;
}

.brand-table .header div {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
}

.brand-table .header a {
  width: 10%;
  height: 1.1rem;
  background: url(../images/return_button.png) no-repeat;
  background-size: 0.19rem 0.32rem;
  background-position: center center;
  float: left;
  position: relative;
  z-index: 1;
}

.brand-table .tip {
  width: 100%;
  height: 1.42rem;
}

.brand-table .tip img {
  width: 100%;
  height: 100%;
} .brand-table .section { display: flex; position: fixed; top: 2.52rem; bottom: 0; left: 0; right: 0; overflow: hidden; } .brand-table .section .left { width: 1.79rem; height: auto; overflow: auto; margin-bottom: 1.22rem; }

.brand-table .section .left li {
  height: 1rem;
  line-height: 1rem;
  font-size: .28rem;
  color: #6c6c6c;
  text-align: center;
  background: #f7f7f7;
}

.brand-table .section .left li a {
  color: #6c6c6c;
  text-decoration: none;
  display: block;
}

.brand-table .section .left .active {
  color: #fa5654;
  background: #fff;
  border-left: .06rem solid #fa5654;
} .brand-table .section .right { flex: 1; margin-bottom: 1.22rem; overflow: auto; background: #fff; padding-left: .3rem; padding-right: .24rem; }

.brand-table .section .right .title {
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.28rem;
  color: #181818;
}

.brand-table .section .right .title .all {
  float: right;
  padding-right: .4rem;
}

.brand-table .section .right .title .tobottom {
  background: url(../images/selectToBottom.png) no-repeat;
  background-size: .21rem .12rem;
  background-position: right center;
}

.brand-table .section .right .title .totop {
  background: url(../images/selectToTop.png) no-repeat;
  background-size: .21rem .12rem;
  background-position: right center;
}

.brand-table .section .right .detail {
  height: auto;
  line-height: 0.45rem;
  font-size: 0.22rem;
  color: #6c6c6c;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.brand-table .section .right .child-box .child-type {
  height: 0.9rem;
  line-height: 0.9rem;
  border-bottom: solid 1px #eeeeee;
  background: url("../images/right.png") no-repeat;
  background-position: right center;
  background-size: .12rem .21rem;
}

.brand-table .section .right .child-box .child-type a {
  font-size: 0.24rem;
  color: #6c6c6c;
  display: block;
}

.brand-table .section .right .child-box .child-type:first-child {
  margin-top: .55rem;
  border-top: solid 1px #eeeeee;
}

.brand-table .section .right .recommend {
  height: 0.88rem;
  line-height: 0.88rem;
  font-size: 0.3rem;
  color: #181818;
}

.brand-table .section .right .recommend-name {
  color: #fa5654;
}

.brand-table .section .right .brandlist {
  *zoom: 1;
}

.brand-table .section .right .brandlist:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

.brand-table .section .right .brandlist li {
  width: 48.5%;
  float: left;
  margin-bottom: 3%;
  box-sizing: border-box;
  position: relative;
}

.brand-table .section .right .brandlist li img {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-table .section .right .brandlist li:nth-child(even) {
  float: right;
}

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css布局，左边的滚动时右边不随着滚动列表左边左右固定，右边可以左右滚动，且左右两边列表滚动时上下联动 css固定定位，不随滚动条滚动 css布局------左边宽度不定,右边宽度自动填满剩余空间 css 关于两栏布局，左边固定，右边自适应 div css左边固定右边自适应布局 css里设置一个div在顶部固定,不随滚动条滚动而滚动 CSS实现三栏布局（左边固定、右边固定、中间自适应）的五种方式 CSS: 实现两栏布局，左边固定，右边自适应的4种方法 CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局