HTML

Question

所以我使用Bootstrap 4作为我的网格系统，而且我有两列彼此。我的问题是，对于height: 100%，容器不随内容增长。使用overflow: auto它有点工作，因为列的内容不再重叠，但它提供了一个滚动条，最好我希望容器根据内容更改高度。

HTML

<div class="py-5 container-fluid about">
    <div class="container-fluid about-wrapper-size">
    <div class="row w-100 h-100 m-0 p-0">
        <div class="align-self-center col-md-4"><img src="http://kingofwallpapers.com/square/square-009.jpg" class="rounded-circle d-block img-fluid mx-auto about-photo"></div>
        <div class="col-md-8 align-self-center">
            <div class="row">
                <div class="col-md-12 about-para-wrapper">
                <h1 class="about-heading">Heading</h1>
                <hr />
                <p class="about-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a odio tristique, tempus est quis, tempus mi. Etiam malesuada enim eget sapien faucibus, eu dictum nunc porta. In sem arcu, lacinia at justo quis, faucibus maximus enim. Donec
                    suscipit nulla arcu, vitae pulvinar enim blandit quis. Donec at neque id velit pharetra mattis. In eu facilisis sem, a rutrum tortor. Suspendisse potenti. Praesent in bibendum velit. Nam laoreet, metus ac bibendum feugiat, orci nunc fermentum
                    lorem, nec mollis nulla dui a nisl. Sed cursus ullamcorper malesuada. Suspendisse finibus eros nec viverra mattis. Curabitur venenatis, nisi et mollis tempor, erat magna mollis mi, in rhoncus neque magna a tellus. </p>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

CSS

.vp-divider {
    background-color:#FFA366 !important;
    border:none;
    margin:0;
    height:1vh;
}

.about {
    height:100%;
    background-image: url("../images/tile.png");
    background-position: center center;
    background-repeat: repeat;
}

.about-photo {
    border: 4px solid #fff;
    -webkit-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75);
}

.about-heading {
    font-family: 'Josefin Slab', serif;
    font-size: 6em;
}

.about-lead {
    font-family:'Roboto';
    font-size:2em;
    font-weight:300;
}

.about-para-wrapper {
    padding: 20 20 20 20;
    background-color:#EFDFCB;
    border:3px solid #fff;
    margin-top: 20;
    margin-bottom: 20;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(135,135,135,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(135,135,135,1);
    box-shadow: 0px 0px 9px 1px rgba(135,135,135,1);
}

.about-wrapper-size {
    width:100%;
}

@media (min-width: 1661px) {
    .about-wrapper-size {
        width: 75%;
    }

    .about-para-wrapper {
        margin-left: 20;
    }
}

Answer 1

使用您提供的代码无法复制您的问题。

但是，如果内容足够长，可以使用min-height: 100%代替height来确保它超过100％。

min-height属性用于设置给定元素的最小高度。它可以防止height属性的已使用值变得小于为min-height指定的值。 min-height的值将覆盖max-height和height。

https://developer.mozilla.org/en/docs/Web/CSS/min-height

Answer 2

如果我理解，您似乎想要'可变宽度内容'并且应该使用：col- {breakpoint} -auto。

快速测试笔，改变它似乎解决了它。

<div class="col-md-auto about-para-wrapper">

https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

编辑：实际上这解决了标题文本溢出的问题以及屏幕尺寸更改时一些奇怪的宽度变化。

你问题的重叠，我只能在px中给出about部分的高度大小时重新创建它。哪个代码中没有出现。

使容器适合其内容

HTML

CSS

2 个答案: