个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用 Bootstrap 构建一个集中划分的布局。屏幕的左侧应该是固定的，屏幕的右侧应该是可滚动的。
到目前为止它工作正常，但是当我在小型设备上测试布局时，屏幕右侧有两个滚动条。当我在小型设备上隐藏滚动条时，右侧的内容不再可滚动。
将 overflow:auto; 更改为 overflow:visible; 解决了两个滚动条的问题，但屏幕左侧不再固定并随着右边。position:fixed; 没有解决问题。
代码如下:
.lw { font-size: 60px; }
body {
margin: 0;
}
#left {
background-color: yellow;
height: 100%;
overflow: hidden;
}
#right {
background-color: pink;
height: 100%;
overflow: auto;
text-align: center;
font-size: 8vw;
}
.container_left {
padding-top: 10%;
padding-bottom: 10%;
}
#question {
text-align: center;
font-size: 4vw;
padding-bottom: 50px;
}
#tip {
text-align: center;
}
@media screen and (max-width: 768px) {
#right{
overflow: hidden;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" id="left">
<div class="container_left">
<p id="question">Lorem ipsum dolor sit amet</p>
<p id="tip">tip</p>
</div>
</div>
<div class="col-lg-6" id="right">
<p style="color:red">start</p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<p style="color:red">end</p>
</div>
</div>
</div>
</body>
</html>非常感谢您的建议。
最好的问候
最佳答案
应用此 CSS 隐藏第二个 block 中的滚动条。这将隐藏该单独元素中的滚动条，但保留站点的主滚动条:
#element::-webkit-scrollbar {
display: none;
}
请注意，这不会有完整的浏览器支持。
另一个更好的解决方案是总体上修改您的 html/css，以便将第一个 block 设置在固定位置，而页面的其余部分正常滚动。这将有更广泛的跨平台支持。这样您就不会摆弄滚动条。
关于css - 中央分隔布局上的两个滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41268006/
24
4
0
我正在尝试从下拉列表中创建一个多选复选框，并通过 ; 连接所选结果。 我的代码是这样的: var myobject = { ValueA : 'Text A', ValueB : 'T
我有输入，我需要获取值并用 “|” 符号分隔。 我的输入: 输出我需要的: 00:00|00:00|00:00 我的代码是: (而且它不工作) var timesArray = $('table').
我正在尝试将超过 400 万行的列拆分为 4 个新列，问题是我不知道在哪里查看或我应该使用 Google 搜索哪个术语。 (是的，我已经在 Google 和 Stack 中搜索了一个类似的问题，但只在
我有一个很大的 csv 文件，其中充满了用“|”分隔的数字字符，例如: 432452 | 543634 4122442 | 41256512 64523 | 12416 然后我读入数据如下: fs
我有一个程序可以计算多个数字的阶乘。这些数字在 cmd 中作为参数传递: factorial.exe 3 4 5 这将分别计算 3、4 和 5 的阶乘。该程序的早期版本有一个百分比显示堆栈的完整性。我
这个问题已经有答案了: 奥 git _a (6 个回答) 已关闭 9 年前。 我有一个双数“547.123456” 我只想使用这个 double 作为“547.1”，就像“.”后面只有 1 个数字 我
我有一个程序可以计算多个数字的阶乘。这些数字在 cmd 中作为参数传递: factorial.exe 3 4 5 这将分别计算 3、4 和 5 的阶乘。该程序的早期版本有一个百分比显示堆栈的完整性。我
我有一个 ArrayList，其中包含一个 messageId、一个 -、一个用户名。 示例:E123-sam 我想划分 List 的每个元素，使得 - 之前的部分进入一个 ArrayList ，而之
我目前有一个“日期”列作为 pandas 数据框的索引，其格式为: January February .... Year2 January February ... Year3 (它来自 pdf 表格
我正在尝试对我的 .mdb 数据库进行 ODBC 查询。我正在使用 mdbtools 驱动程序。该代码是使用 Eclipse 用 C 语言编写的。唯一的问题是，当我写例如: "SELECT 'last
我需要知道如何将这两个if else 部分分开。 public static int NextBday(int Bdays, int days){ int daysleft = 0;
我想计算我的员工分开但合并在一起的出勤率 My target output 我的代码 SELECT count(employees_id) as numbers FROM attendance WH
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 7 年前。 Improve t
下面是我的代码的一小段摘录，它从 API 添加了一行。总共有很多行。 每一行包含一行数据如 TY8tr,50,34,P,SB, 数据行在数据类型上是一致的。我如何通过 ,'s 拆分数组列表中
我想获取选中的元素并用逗号分隔它们，最后一个元素用“and”分隔 它的显示输出为: 我想删除最后一个元素后面的逗号 (,) 并在它前面添加 'and'，例如 Sugar, Milk and Extra
我是 JSON 的新手，但在从已解析的 JSON 对象中提取数据时遇到问题: 我有一个 getstats.php 文件，它回显 mysql 查询的 json 编码结果。以下是 php 文件返回的示例:
我有一个像这样的数字/字符串(我不确定如何将 int 与字符串相互转换) 000000122310200000223340000700012220000011411000000011011271043
标签内的文本
我想尝试一些基本的网络抓取，但遇到了一个问题，因为我习惯了简单的 td-tags，在这种情况下，我有一个网页，其中包含以下预标记和其中的所有文本，这意味着刮掉它有点棘手。 11111111 1111
出于练习目的，我正在开发 TCP 客户端/服务器系统，我想在两者之间发送特定数据。 我已经能够发送字节并让它们显示为字符串。此外，我还可以发送一个特定的字符串(“mb”)并在服务器端弹出一个 Mess
在大量的 unicode 字符中，有一些实际上表示多个字符，例如两个 'f' 字符的 U+FB00 连字 ff。有什么方法可以轻松地将这样的字符转换为多个单个字符？最好是标准 Java API 中可用
我是一名优秀的程序员,十分优秀！