您的位置：首页 > Web前端 > CSS

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

2017-12-19 11:01 1001 查看

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航