开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用Bootstrap 4创建完整高度或高度的div内容

使用Bootstrap 4创建完整高度或高度的div内容可以通过以下步骤实现：

引入Bootstrap库：在HTML文件的<head>标签中添加以下代码，引入Bootstrap库。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">

创建一个div容器：在HTML文件的<body>标签中添加一个div容器，用于包裹要创建的内容。

<div class="container-fluid">
  <!-- 内容 -->
</div>

这里使用了class为"container-fluid"的div容器，它会占据整个屏幕的宽度。

设置div的高度：为了创建完整高度或高度的div内容，可以使用Bootstrap提供的内置类来设置高度。以下是一些常用的类：

h-100：将div的高度设置为100%。
vh-100：将div的高度设置为视口高度的100%。
min-vh-100：将div的最小高度设置为视口高度的100%。

例如，要创建一个高度为100%的div，可以在div容器中添加class为"h-100"：

<div class="container-fluid h-100">
  <!-- 内容 -->
</div>

添加内容：在div容器中添加所需的内容，可以是文本、图像、表格等。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container-fluid h-100">
    <!-- 内容 -->
  </div>
</body>
</html>

这样就可以使用Bootstrap 4创建一个完整高度或高度的div内容了。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云主页：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai_services
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:如何使用jquery tocify或bootstrap toc修复内容div高度无法使用bootstrap设置div的屏幕高度的最大高度如何使用relevel Div Height设置Bootstrap镜像高度如何根据内容动态增加<div />的高度？如何增加div的高度以适应内容？CSS -如何根据内容调整div的高度？如何在Bootstrap 4中降低图像的高度？如何强制bootstrap 4列调整每行内部内容的高度？在使用动态内容时调整Div的高度很难使用动态内容来固定div的高度响应式div正在使用bootstrap达到较长的高度。如何使用CSS将div的高度调整为容器高度？如何平滑添加内容后div高度的变化如何根据内容动态设置父div的高度？如何在Bootstrap 3中设置DIV的响应高度？如何使用Vue获取div的高度如何使div高度或位置适应其内容的相对位置 Bootstrap4 : CardDeck +卡片:如何获得相同的高度？如何使用bootstrap 4让textarea元素填充所有的高度？如何拉伸img元素以获取其div的完整高度

相关搜索:

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

有帮助

没帮助

相关·内容

Bootstrap实战 - 瀑布流布局

讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 HTML/CSS 基础。

04

移动开发之响应布局

Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简介灵活，使得Web开发更加快捷。

02

EasyUi 动态tabs 在实际项目中遇到问题与解决方法

刚开始是把iframe的设置成固定的高度，当把iframe设置成scrolling="auto"时，，这时鼠标移到iframe上会有滚动条，如果设置成scrolling="no"超出内容的话就没有滚动条了，看样子把iframe设置成固定高度是不合适的，改成iframe的高度为内容的高度。由于内容使用了bootstrap table插件，table的高度要根据窗口的高度变化，iframe的高度与内容的高度有关，首先需要确定table的高度，可以根据localStorage设置高度，table的高度获取高度可以完美解决。

02

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

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

02

（数据科学学习手札109）Python+Dash快速web应用开发——静态部件篇（中）

这是我的系列教程Python+Dash快速web应用开发的第七期，在上一期的文章中，我们对Dash生态里常用的一些简单静态部件进行了介绍和功能展示，并且get到dcc.Markdown()这种非常方便的静态部件。

02

60行Python代码编写数据库查询应用

这是我的系列教程「Python+Dash快速web应用开发」的第七期，在上一期的文章中，我们对Dash生态里常用的一些简单「静态部件」进行了介绍和功能展示，并且get到dcc.Markdown()这种非常方便的静态部件。

03

bootstrap+jquery实现图片选取后本地预览+增删+表单ajax上传（完整demo）

运行效果截图—支持再次选择和删除不要的图片，图片预览效果的图片数据是本地的，不需要上传就可以预览

01

Bootstrap响应式前端框架笔记一——强大的栅格布局

Bootstrap是一款HTML，Css和JavaScript开发框架，其也支持开发者进行自定义构建，开发者也可以只打包自己需要的功能模块使用。Bootstrap的中文网址如下：

01

Django入门笔记3

2、了解Bootstrap以及Bootstrap的栅格系统（www.bootcss.com）

04

Angularjs基础(八)

AngularJS Bootstrap 　　　　AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受欢迎的前端框架 Bootstrap 　　　　你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码: 　　　　<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boo

06

bootstrap-suggest插件

这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件，必须使用于按钮式下拉菜单组件上。示例地址：http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/ 插件源码：https://github.com/veenter/bootstrap-suggest-plugin

04

web完全响应式布局原

在页面布局中响应式布局优势很明显，能适应不同的屏幕，现在很多的网站系统也都是响应式布局

02

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

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

03

从box-sizing:border-box属性入手，来了解盒模型

从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。

02

带你认识 flask 美化

虽然我们可以争辩说写代码不容易，但是与那些必须让网页在所有Web浏览器上具有良好一致外观的网页设计师相比，我们的痛苦不值一提。虽然近年来这种情况得到一定程度的缓解，但是在一些浏览器中仍然存在着晦涩的错误或奇怪的设定，这使得设计网页的任务变得非常困难。如果还需要兼容屏幕限制设备（诸如平板电脑和智能手机）的浏览器，则更加困难。

01

分享一篇关于如何使用BootstrapVue的入门指南

BootstrapVue是一个流行的开源前端框架，它结合了Bootstrap（一个前端UI框架）和vue.js（一个渐进式JavaScript框架），用于创建可重用的UI组件和Web应用程序。

03

Bootstrap快速入门

Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。学习后的

06

JQuery 获取元素到浏览器可视窗口边缘的距离

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

02

Bootstrap 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

02

【Java 进阶篇】手把手教你创建 Bootstrap 旅游网站

随着互联网的普及，旅游行业在全球范围内迅速发展。人们通过网络规划、预订和分享他们的旅行经历。因此，拥有一个令人印象深刻的旅游网站对于吸引游客和提供有用信息至关重要。在本篇博客中，我们将手把手教您如何创建一个令人兴奋的旅游网站，使用流行的前端框架 Bootstrap 来简化整个过程。

05

BootStrap应用开发学习入门

[TOC] 0x00 前言简介什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产

02

BootStrap应用开发学习入门

[TOC] 0x00 前言简介什么是BootStrap? 答:Bootstrap是Twitter 的 Mark Otto 和 Jacob Thornton 开发的推出的一个用于前端开发的开源工具包产

03

Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap中的面板由pannel相关类来创建，一个完整的面板分为面板头部、面板体和面板注脚，并且Bootstrap中默认定义了一些面板风格，示例如下：

02

从box-sizing:border-box属性入手，来了解盒模型

从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。

01

【应用】信息短时存储

这是一个在线的应用，用来短时间存储一些信息，以实现在不同设备上共享这些信息的功能。其实目的就是可以将手机上的一些信息快速的复制到电脑上，尤其是在使用Linux系统的时候。下面是该应用的截图。其中阅后即焚是指信息被访问一次之后就会被销毁。

03

web移动端开发(7)上传码云+响应式布局_bootstrap框架

就是说我们不用再写一大堆的媒体查询了,直接把下载好的js文件引用就可以了,这个貌似已经过时了,所以就不多讲解.

01

打造属于自己的 HTML/CSS/JavaScript 实时编辑器

目前市面上已经有很多类似的平台和方案了，类似像jsfiddle、CodePen、Storybook这样的平台，这些平台可以让我们在浏览器中创建代码并直接执行，无需单独在我们本地创建项目，所以当你在测试一段代码时，这些平台可能会为你提供一些帮助。

01

.net core版文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

asp.net mvc请移步 mvc文件上传支持批量上传，拖拽以及预览，文件内容校验

04

跨平台移动APP开发进阶(二)：HTML5+、mui开发移动app教程[通俗易懂]

通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。

02

04-老马jQuery教程-DOM节点操作及位置和大小

根据给定的文章内容，撰写摘要总结。

00

Bootstrap学习文档（四）

注意： 1、弹出层必需放在body里 2、弹出层里面不能再嵌套别的层 3、弹出层出来以后，页面的滚动条会被覆盖

02

前端移动web-day05学习笔记

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏

02

移动开发-响应式

移动开发-响应式布局响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备设备划分尺寸区间超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px ~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应式布局容器: 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从

02

Python web开发：Flask系列之表单操作

Flask是一个基于Python开发，依赖jinja2模板和Werkzeug WSGI服务的一个微型框架。

03

关于“Python”的核心知识点整理大全61

这个简化的Bootstrap模板适用于最新的浏览器，而较早的浏览器可能不能正确地渲染某些样式。完整的模板可在http://getbootstrap.com/getting-started/#examples/找到，它几乎在所有浏览器中都管用。

01

Bootstrap框架的简单使用

Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果，让web开发更迅速、简单。

01

Python全栈之jQuery笔记

jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套.

04

React拖拽组件react-grid-layout实现表单设计

最近在看在线表单设计，找了一些现成的产品和库，今天就看看怎样使用 React-Grid-Layout 实现表单设计。

01

2024年最值得尝试的5个CSS框架

在2024年选择适合项目的CSS框架至关重要。这将为构建新的用户界面（UI）组件所需的总体努力定下基调。目前，最重要的是更快地发布新功能，以保持客户的满意度。因此，你需要一个易于使用的CSS框架，它能够提供现成的UI元素。

01

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

04

H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局

HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。

01

Jump Start Bootstrap 第1章

Bootstrap是一个前端框架，可以帮助开发者启动网页开发的过程；从后端转前端的(Java、PHP等)开发者可能很难把握CSS和JavaScript；但是，使用Bootstrap,他们只要专注HTML，把棘手的CSS和JavaScript交给Bootstrap。

04

python测试开发django-120.bootstrap-table表格添加操作按钮(查看/修改/删除)

接着前面这篇https://www.cnblogs.com/yoyoketang/p/15242055.html 在columns最后添加一个操作项,formatter属性可以帮助我们更加灵活的显示表格中的内容

02

bootstrap栅格换行时产生空白解决

最近使用bootstrap开发项目,但是用到全局css样式中栅格时候出现问题,就是当前窗口的首行正常显示,到了第二行开始则开始不能正常排布!

02

面试官：CSS 面试题集锦

z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

03

Django之模板层

在一个项目里面有一个专门放模板的文件夹Templates，有一个专门放视图的文件views，而且我们大多给浏览器响应的都应该是一个完整的页面，也就是读取的是一个HTML文件，然后再返回给浏览器。但我们在写HTML文件时，里面关于要从数据库拿数据，或者经常更改的地方又不能写死了，此时就需要用到模板语法了，在HTML文件中写上模板语法，然后在views读取HTML文件时，再对HTML文件中模板语法进行解析，替换。这样即完成解耦，又实现代码的复用性。

03

BootStrap

iconfont的使用：https://www.cnblogs.com/changxin7/p/11479216.html

03

Jump Start Bootstrap 第2章

在这一章，我们将讨论Bootstrap一个最重要的功能：网格系统。我们将学会网格系统如何工作；我们如何在应用中使用网格系统；我们也将创建简单的网页布局去更好的理解它。

04

16. Vue 常用列表操作实例 - 增加列表数据

在前端开发中，对于列表的操作是最常见的，例如：增加列表数据、删除列表数据、查询列表的关键字等等。

01

12. Vue 常用列表操作实例 - 增加列表数据

在前端开发中，对于列表的操作是最常见的，例如：增加列表数据、删除列表数据、查询列表的关键字等等。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭