Как применить прокрутку в зависимости от высоты деления?

Question

Как применить прокрутку в зависимости от высоты деления?

0

Я столкнулся с проблемой выравнивания, а высота расширяется.

Сценарий: у меня есть тег div, где мне нужно применить прокрутку, если высота div будет больше фиксированной высоты. Для фиксированной прокрутки по высоте это не применимо.

Пожалуйста, помогите по этому поводу.

#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>

Hiren Sahoo 28 июнь 2016, в 12:01

Источник

0

Вопросы, требующие справки по коду, должны включать КРАТКОЙ код, необходимый для воспроизведения ИТ. Пожалуйста, предоставьте минимальный код.
Minal Chauhan 28 июнь 2016, в 09:44

Теги:

html

angularjs

css

3 ответа

Ещё вопросы

Вопросы, требующие справки по коду, должны включать КРАТКОЙ код, необходимый для воспроизведения ИТ. Пожалуйста, предоставьте минимальный код.

Sravan · Answer 1 · 2016-06-28T07-15-00.000Z

Дайте max-height в css для div и переполнения: 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>

Вот скрипка

CalvT · Answer 2 · 2016-06-28T07-15-00.000Z

Сначала добавьте класс 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>

Mahendra Kulkarni · Answer 3 · 2016-06-28T07-12-00.000Z

Вот пример

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>