在做移动端页面的时候，经常会碰到一个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;

}

HTMLCSS实现左侧固定宽度右侧内容可滚动的更多相关文章

  1. HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...

  2. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  3. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  4. 左侧菜单栏右侧内容（改进，有js效果）

    (如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...

  5. 左侧固定宽度，右侧自适应宽度的CSS布局

    BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...

  6. 左侧栏与右侧内容之锚点、offsetHeight、scrollTop()

    常用功能 1.点击左侧,右侧相关内容随时点到. 2.滚动右侧信息,左侧标题随之显示背景. 第一点很简单,只要在左侧栏  <li><a  href="#aaa"&g ...

  7. 左侧点击后右侧添加tab标签栏以及内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  9. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

随机推荐

  1. Turn the corner

    Turn the corner Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  2. Linux分区规划与xshell使用排错

    1.1 没有重要数据 /boot   200M    存放系统的引导信息 内核 swap   交换分区   防止内存用光了 临时的一个内存 如果你的内存小于8G swap是内存的1.5倍   如果你的 ...

  3. 0_Simple__cppOverload

    使用cuda内质结构 cudaFuncAttributes 来观察核函数的共享内存.寄存器数量. ▶ 源代码: /*cppOverload_kernel.cuh*/ __global__ void s ...

  4. transform 各种影响

    1.提升元素的z-index层级,下面这个例子会让前面的图片显示在上面,一般来说应该是后面的覆盖前面图片的 <img src="mm1" style="-ms-tr ...

  5. 关于缓存问题：js清除缓存

    css并行加载,js串行加载(会阻塞页面) 清除缓存的问题: 1.一般手动清除,浏览器缓存 2.js代码清除缓存(原理:增加了一个参数,且该参数是一个随机数,每次都不一样,所以每次的请求参数都不一样, ...

  6. 一起写框架-Ioc内核容器的实现-基础功能-ComponentScan支持组件注解限制（七）

    实现功能 以上的代码我们发现.我们都是将@ComponentScan扫描的路径下的所有类都加载到容器中的. 而实际需求,我们并不希望所有的类都创建对象,而是加了组件注解@Controller,@Ser ...

  7. Ubuntu Server无线上网

    在自己电脑上装个Ubuntu Server,需要连接无线上网,参照附录的两个连接完成. 重置的自己路由器,只是为了找ssid和密码 配置步骤: 1. 生成无线上网密码配置文件 root@Ubuntu: ...

  8. python之optparse模块

    测试例子 #!/usr/bin/env python2.7 import sys import os from optparse import OptionParser def parse_optio ...

  9. OpenTSDB - 分布式可扩展的监控系统

    OpenTSDB - A Distributed, Scalable Monitoring System http://opentsdb.net/getting-started.html http:/ ...

  10. final、static、代码块、静态代码块、内部类、代码执行顺序

    final final域使得确保初始化安全性(initialization safety)成为可能,初始化安全性让不可变形对象不需要同步就能自由地被访问和共享 作用在类上               ...