html - 如何使用引导程序制作固定网格布局?
问题描述
我需要制作一个固定的网格布局,然后我将对其进行自定义,网页必须具有全屏高度并且不能 V 滚动。
所以我试图通过使用这样的引导网格系统来归档它:
.content {
background-color: rgb(0, 119, 255);
}
.content .dettagli {
background-color: aquamarine;
}
.content .logo {
height: 100px;
background-color: rgb(255, 0, 0);
}
.content .action-bar {
height: 200px;
background-color: rgb(246, 255, 127);
}
.scontrino {
background-color: rgb(255, 127, 127);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="asssets/css/index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 content">
<div class="row">
<div class="col-sm-12 logo">
</div>
<div class="col-sm-12 dettagli">
</div>
<div class="col-sm-12 action-bar">
</div>
</div>
</div>
<div class="col-sm-3 scontrino">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>
但实际上 row 和 colls 包装了内容,所以没有显示,而我怎样才能立即将它们设置为覆盖整个页面?
logo col 应该只覆盖 100px 的高度,而 action-bar 200px ......
编辑我正在尝试将 100% 高度设置为 dettagli,但它需要更多空间并且页面变得可滚动,而 100% 必须适合 .logo 和 .action-bar
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-9 content">
<div class="row h-100">
<div class="col-sm-12 logo">
</div>
<div class="col-sm-12 dettagli h-100">
</div>
<div class="col-sm-12 action-bar">
</div>
</div>
</div>
<div class="col-sm-3 scontrino">
</div>
</div>
</div>
解决方案
这是我试图在评论中向您解释的示例。您不能在任何地方应用 % height ,除非您从html
.
所以这里有一个例子。我让你明白。
.content {
background-color: rgb(0, 119, 255);
}
.height-fix-on-row{
height:300px;
/* You can try with different height as below
height:20vh;
height:20em;
height:20rem;
*/
}
.content .dettagli {
background-color: aquamarine;
}
.content .logo{
background-color: rgb(255, 0, 0);
}
.content .action-bar {
background-color: rgb(246, 255, 127);
}
.scontrino {
background-color: rgb(255, 127, 127);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="asssets/css/index.css">
</head>
<body>
<div class="container-fluid">
<div class="row height-fix-on-row">
<div class="col-sm-9 content h-100">
<div class="row h-100">
<div class="col-sm-12 logo h-25">
</div>
<div class="col-sm-12 dettagli h-50">
</div>
<div class="col-sm-12 action-bar h-25">
</div>
</div>
</div>
<div class="col-sm-3 scontrino h-100">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>
推荐阅读
- angular - defer() 不会对页面刷新产生影响
- powershell - PowerShell 比较输出
- python - 从 oauth2client.service_account 导入 ServiceAccountCredentials 时语法无效
- mysql - 在大型更新时从 mysql 触发器向 gearman 发送作业
- restructuredtext - 在 reStructuredText 中使用标签
- android - 在华为 P30 上使用 Intent 打开 App Launch
- r - 如何在数据文件中的多个 x 和 y 位置之间画线
- android - 如何在 Android / iOS 移动 SDK 产品中捕获日志和崩溃报告?
- java - 如何更改 jar 文件的 Java 类
- arrays - 比较两个数组并找出差异