保证金使Bootstrap 5列的高度超过100vh

如何解决保证金使Bootstrap 5列的高度超过100vh

我正在通过一个简单的网页尝试Bootstrap 5，其中我有一排两列。左栏很好，但右栏很有趣。该网页应该是全屏的，没有滚动。但是，每当我在右列内的元素中添加边距时，整个列的高度就会增加，并超过100vh / 100％。我希望content-right-inner类周围的边距为50px。如果我删除min-height，则所有项目都移到顶部。我希望它是全屏且有边距。我该怎么办？

这是代码：

*,*:before,*:after {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: Arial,sans-serif;
  line-height: 1.7;
  font-size: 1.6rem;
  background-color: #fff;
  color: #000;
}


h1,h2,h3,h4,h5,h6,p {
  margin: 0px;
}

button,input {
  overflow: visible;
}

button,input,optgroup,select,textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.row>* {
  padding-right: 0; 
  padding-left: 0; 
}

.main {
  background-color: green;
  max-height: 100vh;
}


.content-left{
  height: 100vh;
  padding: 0;
  color: #fff;
  background-color: red;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


.content-right{
  background: blue;
}
.content-right-inner{
  margin: 50px;
  position: relative;
  min-height: 100vh;
}


.logo p{
  font-family: Lato-Light;
  font-size: 1.5rem;
  color: #F7A14C;
  font-weight: 600;
}

.main-content{
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.social-box{
  margin: 0 10px 0px 15px;
  float: left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main">
        <div class="container-fluid position-relative h-auto p-0 overflow-hidden">
            <div class="row">

                <section class="content-left col-xs-12 col-lg-6">
                    <div class="inner-container">
                  <p>Boom Boom</p>
                    </div>
                </section>

                <section class="content-right col-xs-12 col-lg-6">
                    <div class="content-right-inner">
                        <div class="logo text-center">
                            <p>test</p>
                        </div>

                        <div class="main-content">
                            <h1>Lorem Ipsum!</h1>
                            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
                            <p>Lorem Ipsumsdfafafafafa!</p>
                            <button>Lorem Ip</button>
                        </div>

                        <div class="social-icons">
                            <div class="social-box">
                                <i class="fab fa-facebook-f"></i>
                            </div>

                            <div class="social-box">
                                <i class="fab fa-twitter"></i>
                            </div>

                            <div class="social-box">
                                <i class="fab fa-linkedin-in"></i>
                            </div>

                            <div class="social-box">
                                <i class="fab fa-instagram"></i>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </section>

解决方法

找到了解决此问题的方法。在四周（尤其是底部）放置边距使容器超过其100vh的高度。要修复它，我只在calc()中使用了.content-right-inner。

这是代码：

.content-right-inner{
  position: relative;
  margin: 50px;
  height: 95vh;
  height: calc(100vh - 100px);
} 

我想这只是扣除了50像素边距带来的额外高度。