如何根据div的高度应用滚动？

Question

当高度变大时，我面临着对齐问题。

场景:我有一个div标签，如果div的高度将超过固定的height.For，则需要应用滚动。固定高度滚动将不适用。

请在这方面提供帮助。

​

#configurator .content .white-box {
  background-color: white;
  border: 1px solid #cecece;
  /*overflow:scroll;*/
}
#configurator .content .white-box-accessory {
  background-color: white;
  border: 1px solid #cecece;
  height: 50px;
  overflow: scroll;
}
#configurator .content .white-box-services {
  background-color: white;
  border: 1px solid #cecece;
  height: 50px;
  overflow: scroll;
}

<div class="white-box">
  <div>
    <p>Accasory Header
    </p>
  </div>
  <div class="white-box-accessory">
    <p>
      Accesory 1
      <br>Accesory 2
      <br>Accesory 3
      <br>Accesory 4
      <br>Accesory 5
      <br>Accesory 6
      <br>Accesory 7
      <br>Accesory 8
    </p>
  </div>
  <div>
    <p>Services Header
    </p>
  </div>
  <div class="white-box-services">
    <p>
      Services 1
      <br>Services 2
      <br>Services 3
      <br>Services 4
      <br>Services 5
      <br>Services 6
      <br>Services 7
      <br>Services 8
    </p>
  </div>
</div>

​

Answer 1

将css中的最大高度赋给div和overflow:auto，，以便在达到该高度后应用滚动。

​

#configurator .content .white-box {
  background-color: white;
  border: 1px solid #cecece;
  /*overflow:scroll;*/
}
 .white-box-accessory {
  background-color: white;
  border: 1px solid #cecece;
  max-height:100px;
  overflow:auto;
}
 .white-box-services {
  background-color: white;
  border: 1px solid #cecece;
  max-height:100px;
  overflow:auto;
}

<div class="white-box"> 
        <div>
             <p>Accasory Header
			 </p>
        </div>

        <div class="white-box-accessory">    
            <p>
			Accesory 1<br>
			Accesory 2<br>
			Accesory 3<br>
			Accesory 4<br>
			Accesory 5<br>
			Accesory 6<br>
			Accesory 7<br>
			Accesory 8
			</p>
        </div>

        <div>    
         <p>Services Header
		 </p>
        </div>

        <div class="white-box-services">    
              <p>
			  Services 1<br>
			  Services 2<br>
			  Services 3<br>
			  Services 4<br>
			  Services 5<br>
			  Services 6<br>
			  Services 7<br>
			  Services 8
			  </p>
        </div>

	</div>

​

Here is the fiddle

Answer 2

首先，将一个CSS类添加到您想要面向的所有div中。我用过scroll。然后添加max-height以设置固定高度，然后添加overflow-y: auto以在内容大于max-height时添加滚动。

在下面的代码片段中，我已经从您的代码中删除了一些服务，以演示效果。

​

.scroll {
  max-height: 300px;
  overflow-y: auto;
  height: 50vh;
}

<div class="white-box">
  <div>
    <p>Accasory Header
    </p>
  </div>

  <div class="white-box-accessory scroll">
    <p>
      Accesory 1
      <br>Accesory 2
      <br>Accesory 3
      <br>Accesory 4
      <br>Accesory 5
      <br>Accesory 6
      <br>Accesory 7
      <br>Accesory 8
    </p>
  </div>

  <div>
    <p>Services Header
    </p>
  </div>

  <div class="white-box-services scroll">
    <p>
      Services 1
      <br>Services 2
      <br>Services 3
      <br>Services 4
    </p>
  </div>

</div>

​

Answer 3

下面是示例

​

html,
body {
  height: 100%;
}
#wrapper {
  height: 100%;
  display: table;
  width: 700px;
}
#header {
  display: table-row;
  height: 30px;
}
#right-col {
  display: inline-block;
  width: 320px;
  height: 100%;
  max-height: 100%;
  margin-right: 20px;
  border: 2px black solid;
  vertical-align: top;
  overflow: hidden;
}
#inner-right {
  height: 300px;
  max-height: 300px;
  overflow-y: scroll;
  background: ivory;
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="body">
    <div id="right-col">
      <div id="header-text">Header</div>
      <div id="inner-right">
        <p>
          Accesory 1
          <br>Accesory 2
          <br>Accesory 3
          <br>Accesory 4
          <br>Accesory 5
          <br>Accesory 6
          <br>Accesory 7
          <br>Accesory 8 Accesory 1
          <br>Accesory 2
          <br>Accesory 3
          <br>Accesory 4
          <br>Accesory 5
          <br>Accesory 6
          <br>Accesory 7
          <br>Accesory 8 Accesory 5
          <br>Accesory 6
          <br>Accesory 7
          <br>Accesory 8
        </p>
      </div>
    </div>
  </div>
</div>

​