Question

.wrap
{
  
  width:400px;
  height:200px;
  border:1px solid #000;
  }

.content
{
  width:300px;
  max-height:200px;
  background-color:blue;
  margin-left:50px;
  }
.content p
{
  margin:0;
  }
.header
{
  margin-left:20px;
  font-weight:bold;
    height:20px;
   }
.header p
{
  margin:0;
  
  }

<div class="wrap">
  <div class="header">
    <p>What is Lorem Ipsum?</p>
  </div>
  <div class="content">
   
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
  </div>
  
  
 </div>

您好，我对CSS有疑问，我想，也许JS是必要的。我希望那段

总是在div（蓝色）中，而蓝色div永远不会超过div class =“wrap”。如果在标题中添加更多文本蓝色div减少高度。

Answer 1

制作max-height:180px;并为overflow: hidden

添加.content

.wrap
{
  
  width:400px;
  height:200px;
  border:1px solid #000;
  }

.content
{
  width:300px;
  max-height:180px;
  background-color:blue;
  margin-left:50px;
  overflow: hidden;
  }
.content p
{
  margin:0;
  }
.header
{
  margin: 0 0 0 20px;
  font-weight:bold;
    height:20px;
   }
.header p
{
  margin:0;
  
  }

<div class="wrap">
  <div class="header">
    <p>What is Lorem Ipsum?</p>
  </div>
  <div class="content">
   
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
    
  </div>
  
  
 </div>

Answer 2

.wrap {
    width:400px;
    height:200px;
    border:1px solid #000;
    overflow-y: auto;
}

.content {
    width:300px;
    min-height:200px;
    background-color:blue;
    margin-left:50px;
}

将max-height中的.content替换为min-height，如果其中的内容超出其.content的最小高度，则自动增加200px的高度。

将overflow-y: auto规则添加到.wrap。只有当其中的内容超出其定义的.wrap高度时，才会将滚动条应用于200px，或者您可以将scroll显式设置为属性以应用滚动条，无论高度如何其中的内容超出了定义的范围。

.wrap {
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    overflow-y: auto;
}

.content {
    width: 300px;
    min-height: 200px;
    background-color: blue;
    margin-left: 50px;
}

.content p {
    margin: 0;
}

.header {
    margin-left: 20px;
    font-weight: bold;
    height: 20px;
}

.header p {
    margin: 0;
}

<div class="wrap">
   <div class="header">
      <p>What is Lorem Ipsum?</p>
   </div>
   <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
</div>

您也可以单独将滚动条应用于.content，而不是将其应用于.wrap。这只会使.content可滚动。

.wrap {
    width:400px;
    height:200px;
    border:1px solid #000;
    overflow: hidden;
}

.content {
    width:300px;
    max-height:200px;
    background-color:blue;
    margin-left:50px;
    overflow-y: auto;
}

如果定义的高度超过，则此样式使.content可滚动。 .wrap高度与overflow: hidden保持一致，这意味着你无法滚动它，尽管里面的内容高度是任何东西。

Answer 3

类似于this？

CSS

.content
{
  width:300px;
  max-height:175px;
  background-color:blue;
  margin-left:50px;
  overflow:hidden;
  overflow-y:auto;
  }

max-height div和div中的div和段落

3 个答案: