-1

所以我使用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; 
    } 
}

来源

2017-03-26 Simon

我不明白，它看起来很好。 https://jsfiddle.net/hkred6d7/你能指出究竟是什么问题？ – Lucian

您的问题不能使用你提供的代码被复制。

但是，您可以使用min-height: 100%而不是height，以确保在内容足够长以满足要求时，它会超过100％。

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

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

来源

2017-03-26 13:53:20

如果我的理解，好像你想要的“可变宽度的内容”，应使用：同事{}断点-auto。

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

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

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

编辑：实际上标题文本溢出就在身边，当屏幕尺寸改变了一些奇怪的宽度改变这种解决的问题。

重叠在你的问题，我只能重新创建它，当我给px高度大小的关于部分。这不会出现在你的代码中。

来源

2017-03-26 14:06:53 Salix

使容器的内容合适高度

HTML

CSS

回答

相关问题