html - Bootstrap 4 全屏桌面 - 列填充剩余空间
问题描述
我正在尝试使用引导程序 4 进行全屏布局，如下所示： 100% 高度和宽度
我的问题是左右列（导航和页脚之间）没有占用剩余空间。其次，我需要将该内容集中在列中。我已经尝试将这些部分的固定高度设置为（90vh），但随后我正在为移动/平板电脑编写很多解决方法代码。有没有我遗漏的解决方案，可能是一些非常明显的事情！
任何帮助表示赞赏，谢谢！
body {
font-family: 'Montserrat', sans-serif;
background-color: #fcfcfc;
}
.navbar-colored{
background-color: rgba(255,255,255,0.9) !important; /*#94a7b7*/
box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.0s;
}
.nav-item {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.1s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav-item a {
color: rgba(17,17,17,0.85);
}
.cart-icon {
padding-right: .75rem;
}
.cart-icon strong {
border-radius: 0;
font-weight: bold;
margin: .3em 0;
border: 2px solid #446084;
color: #0062A8;
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 1em;
}
.navbar{
position:fixed;
width:100%;
background color: transparent;
z-index:10;
flex-wrap: nowrap;
padding: 0.8rem 1.0rem;
}
.navbar-light .navbar-toggler {
border:none;
}
.row .no-pad {
margin-left: 0px;
}
.color-img-col {
padding-left: 20px;
padding-right: 20px;
}
.col-right {
background-color: #e6e6e6;
padding-left: 4%;
padding-right: 4%;
}
.col-left {
background-color: #fcfcfc;
}
.col-lg-4 .steps-small li {
padding-top: 10px;
}
.builder-color-img {
max-width: 80%;
}
.left-content {
margin-left: 9vw;
width: 72%;
}
[data-attribute-link] {
cursor: pointer;
}
.builder-checkout {
background-color: #0062a86b /*#7e94a78c*/;
}
.product-gallery {
background-color: #e6e6e6;
}
/*Builder Main Header / Navigation*/
.builder-header h1 {
font-size: 30px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
color: #202020;
padding-bottom: 17px;
}
.builder-header hr {
color: #9b9b9b;
margin-top: 0px;
margin-bottom: 0px;
}
h2.builder-step-title {
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-style: italic;
color: #202020;
padding-top: 40px;
}
.steps-small {
padding-bottom: 25px;
}
.steps-small ul {
list-style-type: none;
overflow: hidden;
padding-left: 0px;
cursor: pointer;
}
.steps-small .active {
color: #0062A8;
font-weight: 500;
}
.steps-small :hover {
color: #0062A8;
}
.steps-small li {
float: left;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
color: #8a8a8a;
padding-right: 10px;
}
.steps-small img {
width: 20px;
height: 10px;
padding-left:5px;
padding-right:3px;
}
/*Builder Bar*/
.review-bar {
background-color: #0062a8d9 /*#94a7b7*/;
color: white;
text-transform: uppercase;
padding-left: 9vw;
}
.picker-header {
float:left;
font-weight: 200;
font-size: 15px;
padding-left: 7px;
}
span[data-product-attribute-variation-result] {
font-weight: 500;
font-size: 15px;
padding-left: 5px;
}
.pa_color, .pa_neck, .pa_hem, .pa_size, .pa_body, .builder-checkout {
padding-top: 3.5vh;
padding-bottom: 3.5vh;
cursor: pointer;
}
.review-bar .pa_color:hover, .review-bar .pa_neck:hover, .review-bar .pa_hem:hover, .review-bar .pa_size:hover, .review-bar .pa_body:hover {
/*box-shadow: inset 0 0 10px #0062A8;*/
box-shadow: 0 0 8px #0062A8;
}
.builder-checkout:hover {
box-shadow: inset 0 0 10px #0062A8;
}
/*color Screen*/
.white-color-btn, .black-color-btn, .navy-color-btn, .grey-color-btn {
height: 30px;
width: 30px;
border-radius: 30px;
border:1px solid black;
}
/*Next Button*/
.next-btn {
font-size: 14px;
border-radius: 30px;
padding: 15px 50px 15px 50px;
font-weight: 200;
color: #202020;
border: 1px solid #202020;
}
.next-btn:hover {
background-color: #202020;
color: white;
}
.next-btn img {
width: 26px;
height: 10px;
padding-left:10px;
}
.review-bar img {
width: 15px;
height: 15px;
float: left;
margin-top: 3px;
}
.next-btn:hover {
color: white;
}
.image-gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
overflow-y: scroll;
}
.image-gallery img {
padding: 20px 0px;
}
.carousel-indicators li {
text-indent: 0px;
}
.selection-button-top {
padding-top: 50px;
padding-left: 0px;
}
.selection-button-bottom {
padding-bottom: 50px;
padding-top: 30px;
padding-left: 0px;
}
.selection-button {
padding-top: 30px;
padding-left: 15px;
padding-left: 0px;
}
.circle-btn {
border-radius: 30px;
height: 30px;
width: 30px;
text-indent: 40px;
cursor: pointer;
background-color: transparent;
color: #202020;
border: 1px solid #202020;
}
.circle-btn:hover {
border: 1px solid #3ca0e7;
font-weight: 500;
background-color: #202020;
}
.container-fluid .review-bar {
-webkit-overflow-scrolling: touch;
}
.nav-link {
padding: .5rem;
position: relative;
text-decoration: none;
cursor: pointer;
margin-left: 2rem;
margin-right: 2rem;
}
.nav-link:hover {
font-weight: 500;
}
.nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #0062A8;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.steps-small li {
padding-top: 10px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="buildertwo.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,500i|Poppins:400,500" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<title>OneTee Builder 2.0</title>
</head>
<body>
<nav class="navbar navbar-light">
<button class="navbar-toggler x-button" type="button" data-toggle="collapse" data-target="#navbarsmall" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="x-icon"><span></span><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarsmall">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sizing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shipping</a>
</li>
</ul>
</div>
<div class="cart-item has-icon">
<a href="https://onetee.shop/cart/" title="Cart" class="header-cart-link is-small">
<span class="cart-icon image-icon">
<strong>0</strong>
</span>
</a>
</div>
</nav>
<div id="carouselBuilder" class="carousel slide carousel-fade" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" data-product-attribute="pa_color" data-slide-number="1">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0" class="active">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 1. Select Your Colour</h2>
<div class="selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="black">black</button>
</div>
<div class="selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="white">white</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="1">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid" alt="Responsive image" src="black.png">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-product-attribute="pa_neck" data-slide-number="2">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1" class="active">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 2. Select Your Neck Line</h2>
<div class="col-12 selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="crew">crewneck</button>
</div>
<div class="col-12 selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="v-neck">vneck</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="2">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid neck-img" alt="Responsive image" src="v-neck-black.png">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="container-fluid review-bar">
<div class="row flex-row flex-nowrap">
<div class="pa_color col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="0">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Colour:<span data-product-attribute-variation-result="">Black</span>
</div>
</div>
<div class="pa_neck col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="1">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Neck:<span data-product-attribute-variation-result="">Crew</span>
</div>
</div>
<div class="pa_hem col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="2">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Hem:<span data-product-attribute-variation-result="">Straight</span>
</div>
</div>
<div class="pa_size col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="3">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Size:<span data-product-attribute-variation-result="">L</span>
</div>
</div>
<div class="pa_body col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="4">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Body:<span data-product-attribute-variation-result="">Slim</span>
</div>
</div>
<div class="builder-checkout col-4 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="5">
<div class="picker-header">Checkout
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/boostrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="buildertwo.js"></script>
</body>
</html>解决方案
我希望这有帮助。这是一个非常简单的解释，但我相信您可以将其实现到您的代码中。您的列的问题是它们的高度不正确。它们太短了，所以即使在列下方添加了评论栏，仍然有一堆空间。
这就是我将如何解决它。你可以使用calc()css内置的功能。您可以在下面的解决方案中看到我使用它。如果您提前知道评论栏的高度，您可以从 100vh 或 100% 中减去它（我使用的是 100vh）。
我假设评论栏是 50px，但当然，它可以不同。此实现适用于任何屏幕尺寸。如果您运行代码片段，进入全屏模式并调整屏幕大小，您会看到top-content会自行调整并将评论栏推到底部。
所以试着在你的代码中实现它，看看它是否有效！如果没有，我会继续努力提供帮助。如果这不是您正在寻找的解决方案，我很抱歉。
另外，欢迎来到 Stack Overflow！它在这里说您是新用户。
* {
margin: 0;
padding: 0;
}
.top-content {
width: 100%;
height: calc(100vh - 50px);
background-color: blue;
}
.review-bar {
width: 100%;
height: 50px;
background-color: green;
} <div class='top-content'>
This content here would be your two columns
</div>
<div class='review-bar'>
This, of course, would be your review bar
</div>推荐阅读
- vba - 通过从指定的 RGB 颜色列表中随机选择来更改形状的颜色
- node.js - 图片上传类型错误：无法读取未定义的属性“路径”
- webpack - 从 NEXT 9 升级到 Next 11 时出现“HookWebpackError”
- javascript - Nextauth 无法使用 Apple 登录
- c# - 无法加载文件或程序集“System.ComponentModel.TypeConverter”版本=5.0.0.0
- android - 提示在 TextInputLayout 中的位置太高
- azure-web-app-service - 如何修复 azure web 应用程序错误 500？
- java - 尽管控制器正常工作，但 MockHttpServletResponse 在测试中为空
- reactjs - 只允许某些组件作为子组件（React、TypeScript）
- java - 更新 firebase realtimeDatabase 但在 BottomDialog Fragment ？以及在 Material Toggle 组按钮中