开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Twitter bootstrap 4两列全高，不带滚动条

在使用Twitter Bootstrap 4创建两列布局时，确保两列都占据整个视口高度（全高）且不出现滚动条，可以通过以下步骤实现：

基础概念

Bootstrap 4: 是一个流行的前端框架，用于快速开发响应式网页设计。
网格系统: Bootstrap使用12列网格系统来布局页面元素。
Flexbox: Bootstrap 4基于Flexbox布局模型，使得创建复杂的布局变得更加容易。

相关优势

响应式设计: 自动适应不同屏幕尺寸。
易于使用: 提供预定义的类，简化布局过程。
灵活性: 可以通过组合不同的类来实现复杂的布局需求。

类型与应用场景

两列布局: 常用于将页面分为主要内容区域和侧边栏。
全高布局: 确保内容占据整个视口高度，适用于需要最大化屏幕空间的应用场景。

实现步骤

以下是一个示例代码，展示如何使用Bootstrap 4创建两列全高布局且不带滚动条：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Columns Full Height</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .full-height {
      height: 100vh;
    }
    .no-scrollbar {
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="d-flex flex-column full-height no-scrollbar">
    <header class="bg-primary text-white p-3">
      Header
    </header>
    <div class="flex-grow-1 d-flex no-scrollbar">
      <div class="bg-info text-white col-md-8 p-3">
        Main Content
      </div>
      <div class="bg-warning text-white col-md-4 p-3">
        Sidebar
      </div>
    </div>
    <footer class="bg-secondary text-white p-3">
      Footer
    </footer>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解释

HTML结构:
- 使用d-flex和flex-column类将整个页面设置为一个垂直的Flexbox容器。
- full-height类确保整个页面高度为视口高度（100vh）。
- no-scrollbar类通过设置overflow: hidden来隐藏滚动条。

CSS样式:
- html, body设置为100%高度，并移除默认的margin和padding。
- .full-height确保容器占据整个视口高度。
- .no-scrollbar隐藏滚动条。
Bootstrap网格系统:
- 使用col-md-8和col-md-4类将两列分别设置为8和4列宽，适应中等及以上屏幕尺寸。

遇到问题的原因及解决方法

滚动条出现: 可能是由于内容溢出或未正确设置高度。确保所有父容器的高度都正确设置，并使用overflow: hidden隐藏滚动条。
高度不匹配: 确保所有相关元素的高度都设置为100%或使用Flexbox布局来自动调整高度。

通过上述方法，可以创建一个两列全高且无滚动条的布局，适用于各种响应式设计需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

BootStrap应用开发学习入门

答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产品。...-- 需求2.包含 bootstrap 样式表 --> twitter-bootstrap...-- 需求4: 合并了 Bootstrap JavaScript 插件 --> twitter-bootstrap/3.3.7...-- 需求4: 合并了 Bootstrap JavaScript 插件 --> twitter-bootstrap/3.3.7...-- 需求4: 合并了 Bootstrap JavaScript 插件 --> twitter-bootstrap/3.3.7

17.6K2 0

前端组件整理

与underscore比其优势是，效率高；可自定义构建 Sugar 在原生对象上增加一些工具方法 functional.js 提够了一些Curry的支持 bacon.js 函数式编程，cool...外观比uniform好 switchery ios7风格的开关组件 nouislider 用滚动条来设置/控制（音量等）图片类 holderjs 生成占位图片 lazyload imagesLoaded...bootstrap-datepicker bootstrap风格。 dateRangePicker 选取时间段。bootstrap风格。...该组件依赖Twitter Bootstrap, Moment.js和jQuery. 自定义滚动条 perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。...html邮件框架性能测试抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml） jFeed jRss 简单版的jFeed scriptcam 与摄像头交互 Bootstrap

12.8K4 0

BootStrap应用开发学习入门

答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产品。...-- 需求2.包含 bootstrap 样式表 --> twitter-bootstrap...-- 需求4: 合并了 Bootstrap JavaScript 插件 --> twitter-bootstrap/3.3.7...-- 需求4: 合并了 Bootstrap JavaScript 插件 --> twitter-bootstrap/3.3.7...-- 需求4: 合并了 Bootstrap JavaScript 插件 --> twitter-bootstrap/3.3.7

14.6K3 0

网页布局的几种方式有哪些_做网页建议用哪种布局

大家好，又见面了，我是你们的朋友全栈君固定布局　　为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。　　...即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。...bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份: 不过版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...在这种布局方式下，当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现滚动条。而且当需求改变时，可能会改动多套代码。　　...但媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。要匹配足够多的屏幕大小，工作量不小，而且页面中会出现隐藏元素的操作，这样代码就比较冗余，加载时间加长，此外设计也需要多个版本。

3K2 0

前端组件库_前端组件库有什么好处

大家好，又见面了，我是你们的朋友全栈 0....bootstrap GMU 日历组件 Mobiscroll 10.6 取色 Colorpicker plugin for Twitter Bootstrap 10.7 标签插件(Tag) TaggingJS...– 可以灵活定制的 jQuery 标签系统插件 10.8 自动完成插件 At.js – 一个Twitter/微博样式的@自动完成插件 jquery-textcomplete – 智能搜索提示框/自动补全...Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件 13.19 滚动条...Codrops – Useful resources Front-end Code Standards & Best Practices frontend-dev-bookmarks 发布者：全栈程序员栈长

6.3K1 0

Bootstrap框架的简单使用

BootStrap简介 Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript...除此之外，.container 也是Bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%。行和列分别使用 .row 类名和 .col 类名定义栅格布局的行和列。...当屏幕大于 768px 宽度时，水平滚动条消失。 ......组件文档地址：https://v3.bootcss.com/components/ 组件使用方法在引入Bootstrap样式后，你可以直接在官方文档中找到组件的实列，复制其结构，然后修改内容即可。...以下拉菜单为例：先在官方文档复制下拉菜单的实列结构，然后修改其中组成菜单的html的内容。

3.6K1 0

Bootstrap实用手册

Twitter Bootstrap 官网：http://getbootstrap.com 中文官网：http://www.bootcss.com bootstrap.css - 提供了上千个 class...Bootstrap 全局 css 样式－列表.list (1). .list-unstyled 不带标识的列表 (2). .list-inline 行内列表 (3). .dl-horizontal...Bootstrap 全局 css 样式－栅格布局，在页面中可以实现布局的技术： (1). table 布局好处：简单，容易控制不足：效率低 (2). div + css 好处：效率高不足：灵活...栅格布局好处：效率高，容易控制，实现响应式不足：没有栅格布局实际上就是由 div 组成的 table 样式的响应式结构使用方法： ①....导航栏的固定，不会随着滚动条发生滚动，一直在可视化区域中 ①. 固定在页面顶端：.navbar-fixed-top ②.

6K2 0

scrollHeight的分析

大家好，又见面了，我是你们的朋友全栈君。 < !...scrollHeight怎么用既然是scroll我们考虑在有文字溢出的情况下使用它，我们会在后面看到这是为了保证跨平台： 1.我们现在宽高设的是...3行5列，有个长单词跑出来了先不管。...，把我们的文字挤下了，所以实际列数达不到5个字了，所以出现结果是8行，这样ie和safari的是12px*8=96px; 我们可以加上滚动条的宽度 width设为5em+17px=60px+17px=77px...但是要注意的是firefox3.0.6里面如果height指定的值小于16*2=32px时，滚动条不显示，就是那2个箭头，这样实际文字列数可能要比其他浏览器多，于是得到的scrollHeight会小于其他的

3963 0

Bootstrap使用及环境搭建详解

大家好，又见面了，我是你们的朋友全栈君。...举个例子：响应式导航栏如果没有Bootstrap，我需要知道移动端、平板设备等屏幕尺寸，然后通过@media不同尺寸引入不同样式，来完成一个响应式，其中还要考虑IE8等浏览器是否兼容，等一些列的问题都可能存在...https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”> （2）js/bootstrap.min.js...CDN：twitter-bootstrap/3.3.7/js/bootstrap.min.js”> （3）...发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/215566.html原文链接：https://javaforall.cn

2.8K2 0

Bootstrap 响应式框架第二集

btn-xs 5、块级按钮 class .btn-block 4、全局样式 - 列表 1、list-unstyled 不带任何标识的列表...button> 8、全局样式 - 栅格布局系统(重点) 1、网页中能够实现布局的技术 1、div + float 好处：效率高...灵活，不易控制 2、table 布局好处：简单，容易控制不足：效率低效率高，...兼容容易控制的结构 - 栅格布局系统 3、栅格布局系统好处：效率高，容易控制，实现响应式不足：none...所以在创建列的时候要指定列的宽度(当前列要占据几列的宽) 4、列会根据适用的屏幕分成4中类型类： 1、

2.6K3 0

BootStrap初始

大家好，又见面了，我是你们的朋友全栈君。序言什么是Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。...Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。...Bootstrap的历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。...Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。... 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/124507.html原文链接：https://javaforall.cn

4.6K1 0

移动开发之响应布局

前端开发框架 2.1 Bootstrap 简介 Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。...Bootstrap使用四部曲：创建文件夹结构创建html骨架结构引入相关样式文件书写内容 2.3 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container...容器，Bootstrap预先定义好了这个类，叫.container它提供了两个作此用处的类。...Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下...我们嵌套最好加1个行row这样可以取消父元素的padding值而且高度自动和父级一样高。

2.2K2 0

BootStrap

iconfont的使用：https://www.cnblogs.com/changxin7/p/11479216.html Bootstrap介绍　　Bootstrap是Twitter开源的基于HTML... 　　想让手机端能够显示完整的页面，就需要写上　　使用栅格进行布局的时候注意人家bootstrap官网里面写的要求：写法就按照下面的来，写到布局容器里面，列是行里面的元素...效果：　　　　如果里面的列元素没有占满12份，那么右边就会空出来几份的宽度。　　　　还有：　　列偏移　　　　关于媒体查询：　　　 <!...组件（就是一些搭配起来的效果，也涉及到一些动作相关的，所以需要引入js文件了）字体图标(fontawesome里面比较全) 下拉菜单按钮组输入框俎导航分页标签和徽章页头缩率图进度条...常见属性：　　　　　　1.device-width, device-height 屏幕宽、高　　　　　　2.width,height 渲染窗口宽、高　　　　　　3.orientation 设备方向

5.5K3 0

【Bootstrap】003-全局样式：排版

Bootstrap headingSecondary text 运行结果：二、页面主体说明： Bootstrap 将全局 font-size...另外，（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）；图例：三、中心内容说明：通过添加 .lead 类可以让段落突出显示；代码演示：用于高亮单词或短语，不带有任何着重的意味；而标签主要用于发言、技术词汇等； 10、代码演示代码： bootstrap.min.css" /> Twitter, Inc....Source Title">Source Title 运行结果：十、列表 1、无序列表排列顺序无关紧要的一列元素

700 0

Bootstrap运用终极指南

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。...在成为开源软件之前，它被称为Twitter Blueprint，并在公开发布之前的一年多时间里担任Twitter内部风格指南。...你可以在Bootstrap中使用Less，CSS，甚至是Sass（前提是你下载了Saas版的Bootstrap）。 2. 响应式栅格: Bootstrap使用12列响应栅格，它支持嵌套和偏移元素。...Bootstrap-Modal 插件可以将可堆叠的、响应性强的AJAX模态弹窗添加到你的Bootstrap站点。它支持全宽调制解调器和长调制解调器以及其它格式。 4....Social Buttons for Twitter Bootstrap 2 插件提供了矢量、可缩放、支持视屏和可定制的社交按钮。 26.

4.2K1 1

移动端WEB开发之响应式布局

）的介绍 2.1Bootstrap简介 Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。...适合单独做移动端开发 2.6 bootstrap栅格系统栅格系统英文为"grid systems" ,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。...Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...列嵌套最好加一个行 row 这样可以取消父元素的padding值，而且高度自动和父亲一样高小列列偏移使用 .col-md-offset-* 类可以将列向右侧偏移。

4.1K2 0

盒模型

# 元素宽度的问题盒模型的默认行为,当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。如果这些值使用不同的单位，情况就会更复杂。...在一些操作系统上，会出现水平和垂直两种滚动条，即使所有内容都可见（不溢出）。不过，在这种情况下，滚动条不可滚动（置灰）。...auto——只有内容溢出时容器才会出现滚动条通常情况下，建议使用 auto 而不是 scroll，避免滚动条一直出现。 visible，CSS入门容易，但精通不易。...设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。不知道内部元素的高度？...因为侧边栏是主列的相邻兄弟元素，所以它也会有顶部外边距。因此要将其恢复为 0，还需要给主列补上内边距。

1.9K2 0

Web-第五天 BootStrap学习

由Twitter 公司的设计师Mark Otto和Jacob Thornton合作开发。...提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...栅格特点 “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中 “列（column）” 可以作为行（row）”的直接子元素。...行使用的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内列大于12时，将另起一行排列栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类...特色F4 4.2 重写首页之固定滚动条

5.1K5 0

Jump Start Bootstrap 第1章

Bootstrap 官网地址原文出处什么是Bootstrap？...Bootstrap不仅对网页开发的新手有帮助。通过阅读本书，你也将见证Bootstrap如何成为专业程序员的福音。 Bootstrap，它为什么而存在？...想象一下，你设计了一个网站，它拥有引人注目的导航条、时髦的按钮、漂亮的排版、文本和图像的占位符、大的图片滚动条…然而，你不是一个前端开发专家。...好的CSS框架的一些主要亮点包括：更快的开发组织和维护代码让你把时间花在创新上，而不是重新发明轮子 Bootstrap的起源在2011年，在Twitter工作的的一对网页开发者，Mark Otto...Bootstrap已经成为当今最受欢迎的技术之一；它是全栈开发者的必备技能。

3.5K4 0

【软件测试】自动化测试selenium(二)

浏览器的操作操作说明 browser.maximize_window() 浏览器的最大化 browser.set_window_size(width, high) 设置浏览器宽、高 browser.forward...=10000 将浏览器滚动条滑到最底端浏览器前进,后退,刷新操作 private static void test07() throws InterruptedException {...浏览器滚动条操作,窗口操作 private static void test07() throws InterruptedException { WebDriver webDriver...-- twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css...--twitter-bootstrap/2.3.2/js/bootstrap.min.js">

3343 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭