Question

我想要一个div，如果该div的高度超过450px，则会有一个滚动条。我可以通过在div中添加classname，fixedScroll_450来实现。

<div class="fixedScroll_450" id="content"></div>

现在div的内容将动态生成，如果超过450px的高度，则会有滚动条，否则不会。现在为我在课堂上添加的样式

.fixedScroll_450{
   min-height: 450px;
   max-height: 450px;
   width: 100%;
   margin: 0;
   overflow-y: auto;
 }

它工作正常..但我想以百分比值给出高度而不是像素。但

 .fixedScroll_450{
   min-height: 30%;
   max-height: 30%;
   width: 100%;
   margin: 0;
   overflow-y: auto;
 }

无效。使用此代码将高度设置为100％。 PLZ指导我..

Answer 1

这可以通过在html和body标签上设置高度来修复

html,
body {
    height: 100%;
}

在CSS中，两个元素没有设置高度。因此，通过使用min-height: 30%，浏览器没有计算出的高度。添加一些内容的那一刻，html和body标签的高度随着内容本身而增长，而不是页面的高度。

另一方面，如果要确保它始终为屏幕高度的30％，则可以使用30vh（视口高度的30％）。有关这些单位的进一步说明，请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 2

使用vh css单位作为max-height: 30vh

的高度

＆＃13;

.fixedScroll_450{
   max-height: 30vh;
   width: 100%;
   margin: 0;
   overflow-y: auto;
 }

＆＃13;

<div class="fixedScroll_450" id="content">Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>

＆＃13;

Answer 3

你只需要像这样通过jquery设置高度。通过css删除max-height并尝试它，我希望它应该工作

$('#content').css('height':$(window).height()+'px')

Answer 4

如果你没有为父元素提供高度，它将根据它拥有的内容获取div标签<div class="fixedScroll_450" id="content"></div>的高度。您需要为此div标签的父元素提供一些固定高度，以使滚动条起作用。

Answer 5

这里的方法略有不同。如果您可以使用flexbox（请参阅浏览器支持here），您可以这样做：

＆＃13;

.outer-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    display: flex;
    flex-direction: row;
    height: 30%;
    background-color: #64b92a;
}

.wrapper {
    display: flex;
    flex:1;
    flex-direction: column;
    height: 100%;
    overflow-y: scroll;
}

.fixedScroll_450{
    height: 100%;
}

＆＃13;

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="fixedScroll_450">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

＆＃13;

如何使div的高度响应？

5 个答案: