如何获取bootstrap滚动条的高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取bootstrap滚动条的高度相关的知识，希望对你有一定的参考价值。
Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/html框架(同时提供Sass 移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件（模态对话框、标签页、滚动条、弹出框等），可满足常用开发需要，而且还根据需要定制。另外，Bootstrap提供了优雅的HTML和CSS规范，使用者也可以参考学习。本文作者(jawidx)仅在结构层面对Bootstrap进行介绍。工具/原料
Bootstrap
全局样式
1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“<!DOCTYPE html>”
2
布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。
3
栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。
4
Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px，line-height 设置为 1.428。
<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
END
基础样式
1
【排版】，
1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过<small> 标签或带.small 类的元素标记副标题。
主体文本：.lead 类让段落突出显示。
2. 内联文本，使用<mark> 标签表示标注文本，<del>删除，<s>无用，<ins>插入，<u>下划线，<small>小号（父容器字体大小的 85%），<strong>着重，<em>斜体。
3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap
4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize
5. 缩略语类，为 <abbr> 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：<abbr title="attribute" class="initialism">attr</abbr>
6. 地址，以日常使用的格式呈现，在行结尾加 <br> 保留需要的样式即可。
7. 引用，将 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，建议用 <p> 标签。
8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让 <dl> 内的短语及其描述排在一行。
2
【代码】
<code> 标签包裹内联样式的代码片段，
<kbd> 标签标记用户通过键盘输入的内容，
<pre> 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。
<var> 标签标记变量，
<samp> 标签标记程序输出的内容。
3
【表格】
.table 类指定基本样式，
.table-striped 条纹样式，
.table-bordered 类为边框样式，
.table-hover 类带鼠标悬停样式，
.table-condensed 类紧凑样式。
状态类(行或单元格设置颜色)：active，success，info，warning，info。
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其
响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
4
【表单】
1. 基本实例，所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
form-group，input-group，control-group，
2. 内联表单，<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在内联表单中单选/多选框控件的宽度设置为 width: auto;
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。
3. 水平排列的表单
通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）
4. 多选和单选框
.radio、.radio-inline、.checkbox、.checkbox-inline 。
5. 静态控件
水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static类即可。
6. 控件状态
.disabled类禁用控件，为<fieldset> 设置disabled 时则禁用包含的所有控件。
a标签不受此类影响。
readonly 属性可以禁止用户输入
.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。
7. 控件尺寸
通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
8. 辅助文本
help-block类，针对表单控件的“块（block）”级辅助文本。
5
【按钮】
1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active
2. 展现形式，btn-link、btn-block、close
3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。
可通过 <a>、<button> 或 <input> 元素应用按钮类，但建议用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
6
【图片】
图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。
7
【辅助】
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger、
三角符号，caret
浮动
居中
END
组件样式
1
【图标】
200个来自 Glyphicon Halflings 的字体图标，
图标类只能应用在空元素上，且不可与其它组件联合使用。
<span class="glyphicon glyphicon-search"></span>
2
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组：dropdown-header表描述项，.disabled 表禁用项
向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开
3
【按钮组】
按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。
按钮栏.btn-toolbar
钮垂直堆叠排列显示btn-group-vertical
两端对齐排列的按钮组btn-group-justified
4
【导航】
标签页.nav-tabs 类依赖 .nav 基类。
胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
navbar navbar-default
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失。
.navbar-inverse 类可以改变导航条的外观。
breadcrumb 创建带有层次的导航结构（面包屑）。
5
【分页】
pagination，并根据情况对页码使用.disabled 类、 .active 类。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
pager上一页和下一页的简单翻页。并可通过previous，next类标示。
6
【标签】
label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。
badge，可以很醒目的展示新的或未读的信息条目。
7
【其它】
缩略图
提示框
进度条
媒体对象等
END
定制样式
1
BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。
END
总结
1
本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。 参考技术A /********************
* 取窗口滚动条高度
******************/
function getScrollTop()
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
scrollTop=document.documentElement.scrollTop;
else if(document.body)
scrollTop=document.body.scrollTop;
return scrollTop;
不带固定高度的滚动条/带滚动条的动态高度
【中文标题】不带固定高度的滚动条/带滚动条的动态高度【英文标题】：Scrollbar without fixed height/Dynamic height with scrollbar 【发布时间】：2012-06-14 09:36:40 【问题描述】：我有这个 HTML 结构：
<div id="body">
<div id="head">
<p>Dynamic height without scrollbar</p>
</div>
<div id="content">
<p>Dynamic height with scrollbar</p>
</div>
<div id="foot">
<p>Fixed height without scrollbar</p>
</div>
</div>
我想让这三个部分在主要部分 (#body) 内没有溢出。所以中间需要一个滚动条。
我试过这个 CSS：
#content
border: red solid 1px;
overflow-y: auto;
还有这个：
#content
border: red solid 1px;
overflow-y: auto;
height: 100%;
但它们都不起作用。
我在JSFiddle做了一个例子。
我可以只使用 CSS 和 HTML 吗？我宁愿避免使用 Javascript。
【问题讨论】：
【参考方案1】：Flexbox 是一种现代替代方案，让您无需固定高度或 JavaScript 即可做到这一点。
在容器上设置 display: flex; flex-direction: column; 并在页眉和页脚 div 上设置 flex-shrink: 0; 可以解决问题：
HTML：
<div id="body">
<div id="head">
<p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>
<p>Dynamic size without scrollbar</p>
</div>
<div id="content">
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
<p>Dynamic size with scrollbar</p>
</div>
<div id="foot">
<p>Fixed size without scrollbar</p>
<p>Fixed size without scrollbar</p>
</div>
</div>
CSS：
#body
position: absolute;
top: 150px;
left: 150px;
height: 300px;
width: 500px;
border: black dashed 2px;
display: flex;
flex-direction: column;
#head
border: green solid 1px;
flex-shrink: 0;
#content
border: red solid 1px;
overflow-y: auto;
/*height: 100%;*/
#foot
border: blue solid 1px;
height: 50px;
flex-shrink: 0;
【讨论】：
我认为这个回复应该被接受为CSS3的答案。 我认为这不是正确的答案。如果没有固定的 body 元素高度，它将无法工作。 @Equanox 容器的有限高度是重点，否则所有三个部分都将简单地垂直扩展，并且不需要滚动条。请注意，它可以是max-height，而不是固定的height。
你还是在body上使用固定高度。
这里的要点是#content元素上没有固定的高度。 #body 元素上的固定高度只是为了证明#content div 在高度受限时会自动缩小，但您也可以从#body 中删除固定高度，或者将其替换为max-height: 100% 之类的东西.【参考方案2】：
我对 PrimeNG p_Dialog 内容有类似的问题，我通过以下样式修复了 contentStyle
height: 'calc(100vh - 127px)'
【讨论】：
【参考方案3】：使用这个：
style="height: 150px; max-height: 300px; overflow: auto;"
固定一个高度，它将是默认高度，然后滚动条来访问整个高度
【讨论】：
只有在高度设置正确时才能滚动？它不适用于单独使用max-height。【参考方案4】：
<div id="scroll">
<p>Try to add more text</p>
</div>
这是css代码
#scroll
overflow-y:auto;
height:auto;
max-height:200px;
border:1px solid black;
width:300px;
这是演示JSFIDDLE
【讨论】：
效果很好！这就是我要找的！【参考方案5】：你必须指定一个固定的高度，你不能使用 100%，因为没有什么可以比较的，就像height=100% 中的什么？
编辑过的小提琴：
http://jsfiddle.net/6WAnd/4/
【讨论】：
你是对的，它不是真正的 100%，但我希望 3 div（头部、内容和脚）占据具有固定大小的身体部分的 100% 高度。例如，我制作了一张图片：img15.hostingpics.net/pics/986131examplepanel.png 你的身体或头部有固定的高度吗？ 只有身体有固定的高度。头部必须显示全部，在这种情况下jsfiddle.net/6WAnd/11，头部在#content 部分溢出 如果没有 JS，你会发现在一个固定的身体中很难将两个动态高度部分放在彼此之上！！ height=100% 的另一个 div，有什么问题？没有它，这个插件毫无用处。我们需要响应【参考方案6】：这个问题的 JS 答案是：
http://jsfiddle.net/6WAnd/20/
或类似的东西
【讨论】：
【参考方案7】：一种使用非常少的 JS 和 CSS 填充的快速、干净的方法：http://jsfiddle.net/benjamincharity/ZcTsT/14/
var headerHeight = $('#header').height(),
footerHeight = $('#footer').height();
$('#content').css(
'padding-top': headerHeight,
'padding-bottom': footerHeight
);
【讨论】：
【参考方案8】：扩展@mtyaka 使用 flexbox 的答案， 如果你的可滚动在 dom 中很深，需要对所有父元素使用溢出：自动/隐藏，直到我们得到一个固定的高度
jsfiddle https://jsfiddle.net/rohilaharsh/cuazdnkh/1/
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Container</title>
</head>
<body>
<div class="one">
One
<div class="two">
Two
<div class="three">
Three
<div class="table">
Table
<div class="header">Table Header</div>
<div class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure maiores corporis quisquam enim at nam earum non atque dolorum nulla quidem perferendis, porro eveniet! Quisquam, fugit ex aspernatur, aliquid necessitatibus amet aperiam pariatur facilis suscipit ea dolorum qui ratione assumenda eum minima. At a ullam magnam eveniet, hic sit quis dicta perferendis excepturi nemo voluptate ipsum doloremque expedita illo dolor voluptates culpa consequuntur quaerat porro reprehenderit ab alias! Maxime reprehenderit nihil doloribus exercitationem, cupiditate quasi dolorum voluptas repellendus vel fugit incidunt praesentium molestias modi numquam! Quo porro laudantium aperiam suscipit, molestiae quibusdam veniam cum nam fuga facere fugit quisquam distinctio!</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
html
height: 100%;
html, body, .one,.two,.three,.table
display: flex;
flex-direction: column;
/* important */
overflow: hidden;
flex: 1;
margin: 0;
.body
width: 200px;
overflow: auto;
【讨论】：
非常感谢您的提示！ :)【参考方案9】：使用显示网格，您可以动态调整每个部分的高度。
#body
display:grid;
grid-template-rows:1fr 1fr 1fr;
添加上面的代码，你会得到想要的结果。
有时当涉及到许多级别的网格时，css 不会将您的#content 限制为 1fr。在这种情况下使用：
#content
max-height:100%;
【讨论】：
【参考方案10】：我不知道我说的对不对，但是this 能解决你的问题吗？
我刚刚改了overflow-y: scroll;
#content
border: red solid 1px;
overflow-y: scroll;
height: 100px;
已编辑
然后尝试使用这样的百分比值：http://jsfiddle.net/6WAnd/19/
CSS 标记：
#body
position: absolute;
top; 150px;
left: 150px;
height: 98%;
width: 500px;
border: black dashed 2px;
#head
border: green solid 1px;
height: 15%;
#content
border: red solid 1px;
overflow-y: scroll;
height: 70%;
#foot
border: blue solid 1px;
height: 15%;
【讨论】：
但我无法设置#head 和#content 的大小。我希望#content 和#head 填充所有主 div (#body)。我只是制作一张图片来说明它：img15.hostingpics.net/pics/986131examplepanel.png 此解决方案不允许有 2 个具有动态高度的块。如果我在第一部分放了很多文字，它就不起作用：jsfiddle.net/6WAnd/21。我认为@philip-bevan 发现没有 JS 是不可能的。请参阅下面的答案。【参考方案11】：使用这个：
#head
border: green solid 1px;
height:auto;
#content
border: red solid 1px;
overflow-y: scroll;
height:150px;
【讨论】：
除非我更改第一部分，否则它可以工作。尝试大量“不带滚动条的动态大小
”jsfiddle.net/EKvCw以上是关于如何获取bootstrap滚动条的高度的主要内容，如果未能解决你的问题，请参考以下文章