HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候，经常会碰到一个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实现左侧固定宽度右侧内容可滚动的更多相关文章
- HTML和CSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- 左侧菜单栏右侧内容（改进，有js效果）
(如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版 这是上一篇文章的改进. 上一篇文章的左侧菜单是没有子目录的. 这是效果图: 左侧菜单代码: <div class=&quo ...
- 左侧固定宽度，右侧自适应宽度的CSS布局
BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd.我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修 ...
- 左侧栏与右侧内容之锚点、offsetHeight、scrollTop()
常用功能 1.点击左侧,右侧相关内容随时点到. 2.滚动右侧信息,左侧标题随之显示背景. 第一点很简单,只要在左侧栏 <li><a href="#aaa"&g ...
- 左侧点击后右侧添加tab标签栏以及内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
随机推荐
- YUM源、磁盘基础知识 CDN概念
第1章 YUM源 1.1 什么是yum源 Yellowdog Updater, Modified 一个基于RPM包管理的字符前端软件包管理器.能够从指定的服务器自动下载RPM包并且安装,可以处理依赖性 ...
- 有关CUBLAS中的矩阵乘法函数
关于cuBLAS库中矩阵乘法相关的函数及其输入输出进行详细讨论. ▶ 涨姿势: ● cuBLAS中能用于运算矩阵乘法的函数有4个,分别是 cublasSgemm(单精度实数).cublasDgemm( ...
- vue 使用axios 跨域请求数据的问题
axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...
- Oracle Database 12c Release 2安装详解
第1章 Oracle Database 12c Release 2安装详解 1.1 下载方法 oracle官网https://www.oracle.com 1)打开官方网站,找到下载连接 2)选择更多 ...
- 几种移动app API调用认证方案浅析
最近做的金融项目,app调用的接口需要做一个身份认证,所以找了下目前API services验证的几种方式.之前翻译的一篇文章--[译]移动API安全终极指南中,主要提出了API服务调用验证的问题,通 ...
- php 例子 如何转换ISO8601为 utc时间
//firstpowertime "2017-01-02T13:22:22" 获取时间$firstpowertime=$list[$i]['firstpowertime'];//判 ...
- 创建并在项目中调用SQLSERVER存储过程的简单示例
使用SQLSERVER存储过程可以很大的提高程序运行速度,简化编程维护难度,现已得到广泛应用.创建存储过程 和数据表一样,在使用之前需要创建存储过程,它的简明语法是: 引用: Create PROC ...
- 【机器学习】DNN训练中的问题与方法
感谢中国人民大学的胡鹤老师,人工智能课程讲的很有深度,与时俱进 由于深度神经网络(DNN)层数很多,每次训练都是逐层由后至前传递.传递项<1,梯度可能变得非常小趋于0,以此来训练网络几乎不会有什 ...
- Json解析封装GsonUtil
感觉Json解析都快谈不上一门技术了,在Android Studio上可以直接使用JsonFormat插件,一键就解析出Json所转换的Javabean,再配合GsonUtil的使用,Json解析的步 ...
- web离线应用 Web SQL Database
web sql database 是html5废弃的一个新特性,它提供了基本的关系数据库功能,使用 `SQL` 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite ...