Bootstrap4布局问题-用内容填充浏览器页面高度

Bootstrap是一个流行的前端开发框架，用于快速构建响应式网页和Web应用程序。Bootstrap 4是Bootstrap框架的最新版本，具有更多的布局选项和功能。

在Bootstrap 4中，要将内容填充到浏览器页面的高度，可以使用以下方法：

使用Flexbox布局：Flexbox是一种强大的布局模型，可以轻松实现等高的列布局。在父容器上应用d-flex类，然后使用flex-fill类将子元素填充到父容器的高度。例如：

<div class="d-flex flex-column" style="height: 100vh;">
  <header>头部内容</header>
  <main class="flex-fill">主要内容</main>
  <footer>底部内容</footer>
</div>

使用Grid布局：Bootstrap的Grid系统可以将页面划分为行和列，可以使用h-100类将列的高度设置为100%。例如：

<div class="container-fluid" style="height: 100vh;">
  <div class="row">
    <div class="col h-100">头部内容</div>
  </div>
  <div class="row flex-fill">
    <div class="col">主要内容</div>
  </div>
  <div class="row">
    <div class="col h-100">底部内容</div>
  </div>
</div>

使用CSS的calc()函数：可以使用calc()函数计算元素的高度，将其设置为浏览器窗口高度减去其他元素的高度。例如：

<header style="height: 10vh;">头部内容</header>
<main style="height: calc(80vh - 100px);">主要内容</main>
<footer style="height: 10vh;">底部内容</footer>

以上是几种常见的方法，根据具体情况选择适合的方法。在实际开发中，可以根据需要进行调整和组合使用。

推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云服务器（CVM）：提供弹性计算能力，可根据实际需求弹性调整计算资源，满足不同规模应用的需求。产品介绍链接：腾讯云服务器
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，可用于存储和管理各种类型的数据。产品介绍链接：腾讯云对象存储

相关·内容

BootStrap 前端框架简介

还是使用以前的固定单位去布局，会引发两个问题：（1）分辨率太大，网页两边留白太多（2）分辨率太小，页面显示不完全概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。...弹性布局弹性图片媒体和媒体查询优点 1.面对不同分辨率设备灵活性强，能够快捷解决多设备显示使用问题 2.更少维护，开发一个网站，多终端使用缺点 1.兼容各种设备工作量大,网上重复性的代码，你看适合浏览器即可...它可以更轻松地在页面上放置元素。响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。让我们开始构建响应式网格视图。...这可确保填充和边框包含在元素的总宽度和高度中。

1701 0

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

），高度大都是用px来固定住。...缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调栅格化布局　　将网页宽度人为的划分成均等的长度...bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份: 不过版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...为了兼容 IE，采用的是浮动方式来实现栅格系统：即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变 container 容器的宽度，对应栅格宽度自然也跟着改变： bootstrap4...同自适应布局一样，在书写 CSS 样式时，元素宽度不能使用绝对宽度，而要使用相对大小。　　Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。

3K2 0

低代码如何构建响应式布局前端页面

一般来说，在处理这样的问题时，我们需要开发和提供不同的布局，通过检测视口的分辨率，判断当前访问设备的种类，请求不同的页面布局从而提供尺寸较为合适的展示场景。...网格（Grid）布局网格布局（Grid）是CSS（层叠样式表，为网页添加页面样式的一种计算机语言）布局方案的一种，也是泛用性最广泛的一种。...固定模式固定模式下，行高、列宽为固定的大小，单位为像素，不会随着展示屏幕的变化而变化，如果页面所有被设定了固定模式的行列总像素已经大于了浏览器的宽度/高度，那浏览器中就会出现横向/纵向滚动条。...当对某个组件设置了自适应之后，组件会根据内部的内容动态的变化自己的高度或宽度，比如文本框，会根据输入的文字内容来动态调节自己的框体大小，附件单元格会按照数据的多少来扩展高度。...多行区域的单元格范围设置通过设置范围模式达到内容自动填充页面的效果总结通过对页面拉伸和行列设置灵活运用，活字格所涉及的应用可以灵活的适应不同尺寸下的展示终端，此外，活字格还提供了移动端的界面，方便用户在移动端下

4K4 0

动手实践：美化 Jenkins 报告插件的用户界面

这是一个高度灵活的工具，建立在逐步增强的基础上，可将所有这些高级功能添加到任何 HTML 表中: 上一页，下一页和页面导航通过文本搜索过滤结果一次按多列对数据排序 DOM、Javascript、Ajax...ECharts 是一种开放源代码的 JavaScript 可视化工具，用于创建直观、交互式和高度可定制的图表。它可以在 PC 和移动设备上流畅运行，并且与大多数现代 Web 浏览器兼容。...在不久的将来，我希望找到一个有志于用增量扫描仪替代这种愚蠢算法的志愿者。引入新的 UI 组件如第 3 节所述，详细信息视图特定于插件。显示的内容以及这些元素的显示方式取决于各个插件作者。...栅格布局目前，Jenkins 在所有视图中都包含 Boostrap 栅格系统的旧版本和补丁版本（24 列）。该版本与 Boostrap4 或任何依赖 Bootstrap4 的 JS 库不兼容。...此关系是必需的，以便 Jenkins 可以自动创建和绑定 Ajax 调用的代理，该代理将在创建 HTML 页面后自动填充表内容。

6.3K1 0

HTML常见面试题

Alt 当图片不显示时，用文字代表。Title为该属性提供信息 8. 改变元素的外边距用什么属性？改变元素的内填充用什么属性？...改变元素的外边距用 margin，改变元素的内填充用 padding。 9.在新窗口打开链接的方法是？ target：_blank。 10....合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？结构是 html，表现是 css。...为什么要初始化CSS样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 15. 为什么会出现浮动和什么时候需要清除浮动？...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

991 0

前端面试题2（CSS）

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了为什么要初始化CSS样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的...盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin) IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型...要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽好处：重要的内容放在文档流前面可以优先渲染原理：利用相对定位、浮动、负边距布局，而不添加额外标签 .container {...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...工作原理：浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素引起的问题？

2.8K1 1

css应知应会第三集

3、重复线型渐变 background:repeating-linear-gradient(to top,red 0%,green 50%); 5、浏览器兼容性问题...2、bottom 将标题放在表格之下 4、显示规则 1、作用告诉浏览器如何布局一张表...，默认布局方式，单元格的尺寸实际上是由内容来决定的 2、fixed 固定，固定表格布局，单元格的尺寸是以设定的值为准...，不会通过内容而改变布局 3、自动表格布局 VS 固定表格布局 1、自动表格布局 1、单元格的大小会适应内容的大小...，每个块级元素都是按照从上到下的方式排列的 4、多个行内元素会在一行中显示，显示不下再换行问题：如何在页面中解决多个块级元素在一行内的显示问题 ???????

1.6K2 0

流体布局、响应式布局

PC及移动端页面适配方法设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局+流体布局 2、移动端适配：流体布局+少量响应式基于rem的布局下面先来看看一个布局的问题...布局问题首先写四个div ? 按照百分比来设定宽度，无论如何缩放浏览器，这四个div都会自动调整大小。那么如果设置一个边框呢？设置边框 ?...流体布局流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing...使用box-sizing方式解决上面的布局问题 1、content-box 默认的盒子尺寸计算方式 2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内...响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

2K3 0

43. Vue组件案例-评论列表

编写这个案例步骤大致如下：编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表那么提交评论信息表单可以写为一个子组件，而评论信息列表为父组件给提交评论信息表单将子组件的评论内容传递到父组件评论信息列表...评论信息的基本存储方式可以用localStorage 好了，看到上面几项的需求描述，下面来实现看看。示例 1.编写基本页面页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系，我将上面提交评论的部分抽出来作为一个子组件。 2.抽取评论内容作为子组件 ?...上面抽取添加评论内容为一个组件之后，下面来在父组件中使用子组件，如下： ? 浏览器显示如下： ? 那么组件显示成功之后，下面就应该实现一下添加评论内容的功能。...打开浏览器，查看存储的数据，如下： ? 7.存储评论内容数据完毕后，清空输入框 ? 好了，这时候已经设置添加好评论内容的数据。下面来看看如何在列表中刷新数据。

2.1K3 0

【BootStrap】的说明

一开始写的时候，我并没有写这句，后来看BootStrap4的中文文档时，发现了这一句，我就谷歌了一下，发现如下的内容: X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的...，这个区别与content="IE=7"在无论页面是否包含 Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容...当然，看完后差不多明白了，就是使用IE时，如果版本不够，会使用最新的内核解析器，也就是使用你安装的浏览器的最新的内核解析器！...然后我就去查找英文版的BootStrap4，结果，果然模板并不是中文档翻译的那样。。。。在这里，也给同我一样英文不太好的朋友一个建议。如果在看中文文档发现什么问题时，记得去看看英语原文。

6912 0

css面试点一：盒模型详解+遗漏点

什么是css盒子模型可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content...，DOM元素所采用的布局模型。...可通过BOX-SIZING进行设置 width和height：内容的宽度、高度（不是盒子的宽度、高度）。盒子的内容，显示文本和图像。 padding：内边距。清除内容周围的区域，内边距是透明的。...这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明浏览器给默认的margin大小是8个像素，此时占据了整个页面的一大部分区域，而不是全部区域。

4544 0

移动开发-流式布局

移动开发-百分比布局流失布局案例: 京东商城: 点击查看通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充流式布局，就是百分比布局，也称非固定像素布局 max-width...最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度图片 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css...layout viewport: 视口是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口视觉视口 visual viewport: 它是用户正在看到的网站的区域，可通过缩放去操作视觉视口...(主流)，通过判断设备，如果是移动设备打开，则跳到移动端页面响应式兼容移动端 (其次)，通过判断屏幕宽度来改变样式，以适应不同终端, 制作麻烦，需要花很大精力去调兼容性问题移动端浏览器: 移动端浏览器基本以...**webkit 内核**为主，因此我们就考虑webkit兼容性问题同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可图片特殊样式: /*CSS3盒子模型*/ box-sizing

1.1K3 0

揭示不为人知的CSS

从这一步开始浏览器会生成一个“文档树”。树的结构是一种用HTML代表具有明显层次结构信息的方式。树中的元素可以用类似于家谱的方式描述，比如：后代节点、父节点、子孙节点和兄弟节点。...此过程会确定页面上元素的布局和位置。...通常的样式是在页面中添加了一个引用css文件的link 标签，或者在HTML主体中使用 style 标签。即使最基本的页面也有由浏览器提供的默认样式。...在这种情况下，它似乎可以感觉到在内容上田间的填充和边距，但实际上，是重新计算宽度以确保一切都适合。通过比较，设置宽度为“100％”时，不管边距、填充和边框的大小是多少，内容区域都将填充可用空间。...通常如果不设置，元素的高度将适应其所有后代元素。当元素浮动时，它们从正常文档流跳出来，这意味着容器不会调整其高度以将其清除。正是这种行为允许多种文本、标题和其他元素对浮动内容进行流式包裹。

1.6K3 0

前端面试题-每日练习(3)

容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。...，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。...当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。...优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用 (2)、结尾处加空div标签...因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

1542 0

01_移动端布局基础

响应式开发主要是为了解决移动互联网浏览的问题。响应式页面优点可以跨平台。响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题。便于搜索引擎收录。...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...1.3 移动Web开发基础 1.3.1 视口视口（Viewport）最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。

981 0

CSS Houdini 是个啥？让你的网页“魔法上身”！

高级动画：实现色彩、形状随页面滚动变化的炫酷效果。高性能：Houdini的渲染跑在浏览器的独立线程上，不影响页面主线程，速度嗖嗖的！是不是很带感？...实现方式用JavaScript定义布局逻辑，然后在CSS中使用。...columns：一个数组，保存每列的当前高度，用于计算子元素的摆放位置。 yield：将每个子元素的位置和尺寸传回浏览器，由它负责渲染。...效果商品列表将按照内容高度自动排列，形成一个视觉平衡的瀑布流布局。 4....总结：CSS Houdini到底有什么用？提升页面体验：自定义背景、布局和动画，让你的页面与众不同。

831 0

41. Vue组件案例-评论列表

编写这个案例步骤大致如下：编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表那么「提交评论信息表单」可以写为一个子组件，而「评论信息列表」为父组件给「提交评论信息表单」...评论信息的基本存储方式可以用「localStorage」好了，看到上面几项的需求描述，下面来实现看看。示例 1.编写基本页面内容作为子组件上面抽取添加评论内容为一个组件之后，下面来在父组件中使用子组件，如下：浏览器显示如下：那么组件显示成功之后，下面就应该实现一下添加评论内容的功能。...4.使用v-mode设置评论者以及评论内容 5.设置提交按钮的click事件，打印评论数据在浏览器查看一下打印出来的数据，如下：已经可以获取到数据了，下面将其进行存储。...6.将获取的user和comment存储到localStorage中打开浏览器，查看存储的数据，如下： 7.存储评论内容数据完毕后，清空输入框好了，这时候已经设置添加好评论内容的数据。

1.9K1 0

面试题整理｜45个CSS面试题

结构和样式的分离使HTML可以执行其最初基于的更多功能-内容标记，而不必担心页面本身的设计和布局，这通常称为“外观”页面。 Q3、CSS的主要版本有哪些？...flex容器的主要特征是能够修改其子项的宽度或高度，以在不同的屏幕尺寸上以最佳方式填充可用空间。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。...box-sizing：边框更改了元素的宽度和高度的计算方式，边框和填充也包括在计算中。元素的高度由内容的高度+垂直填充+垂直边框宽度计算得出。...元素的宽度是通过内容的宽度+水平填充+水平边框宽度来计算的。在我们的盒子模型中，考虑到填充物和边框，与设计人员实际如何想象网格中的内容产生了更好的共鸣。 Q39、什么是CSS预处理器？...它结合了文档的内容和样式。浏览器显示DOM的内容。 Q45、推荐一种优化打印页面的方法？创建可打印页面的秘诀是能够识别和控制您网站的“内容区域”。

4.5K3 0

给萌新HTML5 入门指南

那么首先来了解下HTML5都更新了那些内容：什么样的网页是HTML5网页？只要html页面第一行是浏览器就会按照HTML5标准去解析网页，无论页面中是否使用了HTML5新增内容 HTML5新增了哪些内容？...HTML5页面布局常用的页面布局方式有很多种，比如最早的静态表格布局通过栅栏划分页面的流式布局根据屏幕大小自动调整内容的自适应布局融和流式布局和自适应布局的响应式布局以上布局主要通过使用css...，中间部分container高度通过使用CALC计算，浏览器高度变化时自动调整。...这样的布局方式存在一些问题，就是当header、footer高度发生变化后，需要重新设置container高度，另外如果container中并列元素较多时，浮动难以控制。

1.3K4 1

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后，发现这种方式给我们带来太多好处了。...换句话说，从这样—— 变成这样—— CSS Grid 用CSS Grid来处理这个问题是很简单的。...浏览器支持最后，我们也需要讨论一下浏览器支持的问题。在我写这篇文章的时候，全球75%的网站流量已经能够支持CSS Grid。...换句话说，CSS网格是一个纯粹的可视化工具，使用得当德华，对文档内容应该没有影响。由此可知：如果版本较旧的浏览器中不支持CSS网格，也不会应该影响访问者访问内容，只是体验不同而已。...换句话说，因为已经将内容与视觉效果分开了，所以所有的访问者都看到内容，但是支持CSS Grid的浏览器会通过更好的布局来提升用户的体验。

2.2K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云