开发者社区> 木头先生> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTMLCSS实现左侧固定宽度右侧内容可滚动

简介: 在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo。 处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll。
+关注继续查看

在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo。

处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll。一般移动端左右滑动不需要显示滚动条,此时可以设置.element::-webkit-scrollbar {display:none}

Demo:

HTML:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title>模板</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

   <div>

     <div class="normal-div first">

     </div>

     <div class="normal-div second">

     </div>

     <div class="normal-div third">

        <div class="left"></div>

        <div class="right">

          <ul>

               <li>gesrhgdsfggggggggggggggdfghfghfddsfgsdgggggggggggggggdsgerwghsdrg</li>

              <li>argergadfgesthsadrfghfghfghg4w6jtdgjgdeyhdarthgrtdrhdzhgqrtygrtyhsrthaehea</li>         

              <li>aerhrsthwrthszdthj5ejadtzkmsfghkgdgjghjhjghfnstyxjwfgndghkfxkjhvcxnrtjfdyjhsft</li>

          </ul>

        </div>

     </div>

   </div>

</body>

</html>

 

CSS:

.normal-div{

       height:300px;

       width:100%;

       background:red;

}

.second{

       background:blue;

}

.third{

       position:relative;

       background:grey;

       font-size:18px;

}

.left{

       display:inline-block;

       position:absolute;

       top:0;

       left:0;

       background:green;

    width:25%;

    height:300px;

 

}

.right{

       display:inline-block;

       margin-left: 25%;

       width:75%;

       height:300px;

       background:yellow;

    overflow-x:scroll;

}

.right::-webkit-scrollbar{

  display:none;

}

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《HTML 5与CSS 3权威指南 》 (第2版·下册)——第19章 19.3.2
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第3版·下册)——第19章,19.3.2,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1307 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载