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）：提供安全、稳定、低成本的云端存储服务，可用于存储和管理各种类型的数据。产品介绍链接：腾讯云对象存储

相关·内容

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

），高度大都是用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 页面后自动填充表内容。

6K1 0

HTML常见面试题

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

841 0

前端面试题2（CSS）

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

2.8K1 1

流体布局、响应式布局

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

2K3 0

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

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

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

4334 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

1K3 0

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

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

2.1K3 0

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

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

1372 0

揭示不为人知的CSS

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

1.6K3 0

【BootStrap】的说明

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

6702 0

给萌新HTML5 入门指南

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

1.3K4 1

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

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

4.1K3 0

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

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

1.9K1 0

104道 CSS 面试题，助你查漏补缺（上）

-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。...第四种情况，是没有内容的元素，自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、pa dding或者高度来解决这个问题。...当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。...详细资料可以参考：《谷歌浏览器不支持 CSS 设置小于 12px 的文字怎么办？》[95] 49.让页面里的字体变清晰，变细用 CSS 怎么做？...所以移动端浏览器提供了一个layout viewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layout viewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面

2K1 0

「资深前端工程师总结」前端面试知识点大全—CSS篇

浮动元素引起的问题：（1）在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或 right）的元素，在这种情况下，容器的高度不能自动伸长撑开以适应内容的高度...浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。...28、让页面里的字体变清晰，变细用CSS怎么做？...用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。方法一：首先取消浏览器自动调整功能。...42、为什么要初始化 CSS 样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

1.5K3 0

HTML出现错位的问题

4种问题 1、在HTML代码中缺失元素的开始或结束标签答：这个问题看似比较简单，但是也是大多数人最容易犯的问题，在现实的工作中，我们一般都是用开发工具，如Dreamweaver或Editplus...2、CSS设置中对边界、填充或边框的设置超出了父级容器的范围答：在解释这个问题之前，先让大家清楚一下子父级关系，如： <table align=”center” border=”10” width=”500” height=”200...4、浏览器的解析问题答：这个问题是最容易出现的，因为在现实中我们所做的网站可能会在不同的浏览器下跑，所以这时候就得考虑浏览器的兼容性问题。...规范HTML：这个相对来说比较容易，在HTML的头部都有一个DTD的约束，你只需要把这个DTD文件下载下来，然后查看这个DTD文件里的内容，这里面包含了一些HTML的书写规范，如一个页面中都可以出现哪些元素

1.8K5 0

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

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

2.2K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云