Блог

Я знаю, что есть множество вопросов, задающих одно и то же, но ни одно из решений, с которыми я столкнулся, не подходит для сценария, который я настроил.

У меня есть простая структура, которая имеет один основной внешний div и внутренний div. Внутри внутреннего div я разделил на два по высоте 10% и 90% соответственно. Кажется, что второе разделение выходит за рамки ограничений, установленных max-height, и я не могу понять, почему.

РЕДАКТИРОВАТЬ Мне нужно, чтобы полоса прокрутки присутствовала во втором разделении (.content), а не во внутреннем div (.main-body)

 .outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  max-height: 60%;
  padding: 10px;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: 90%;
  background: blue;
  padding: 10px;
  overflow: auto;
}  

 <div class="outer-layer">
  <div class="main-body">
    <div class="header">
      <h2>Hello</h2>
      <!--header-->
    </div>
    <div class="content">
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <!--content-->
    </div>
    <!--body-->
  </div>
  <!--overlay-->
</div>  

В настоящее время я тестирую в Chrome

Я включил эту скрипку

Является ли этот JSFiddle тем, к чему вы стремитесь?

В вашей первоначальной версии было несколько небольших сбоев, которые я исправил и изложил ниже…

1. Вы не можете использовать высоту в процентах для элемента, родительский элемент которого не имеет заданной высоты. Поскольку вы не указываете .main-body заданную высоту, его дочерние элементы не будут учитывать высоты в процентах. Это решается путем указания .main-body высоты.

2. Ваш <h2> имеет большие вертикальные поля, и поэтому его высота увеличивается по сравнению с высотой его родителя. Удалите их, выполнив h2 {margin: 0;} .

3. Помните, что заполнение является аддитивным! заполнение 10 пикселей как в верхней, так и в нижней части элемента добавит 20 пикселей к его высоте. Вы можете использовать box-sizing: border-box; свои элементы, чтобы избежать этого — это заставляет элемент применять их отступы внутрь, а не наружу, тем самым не влияя на его высоту / ширину.

Страница должна отображать информацию независимо. Предполагая, что внутреннее содержимое больше внешнего, using overflow создает для вас полосу прокрутки.

 .main-body {
  overflow-y: scroll;
}
  

http://www.w3schools.com/cssref/pr_pos_overflow.asp

После редактирования обновлений:

 .header {
  position:fixed;
  width: 60%;
}

.content {
  margin-top: 10%; // To match the header's height
}
  

Стиль будет отключен, но вы можете настроить его так, чтобы он лучше соответствовал вашему проекту.

JSfiddle: https://jsfiddle.net/nu5LkL6b/9 /

Как обсуждалось: вы не можете использовать высоту в процентах для элемента, родительский элемент которого не имеет заданной высоты. Поскольку вы не задаете .main-body заданную высоту, его дочерние элементы не будут учитывать высоты, основанные на процентах. Это решается путем присвоения .main-body высоты.

Маленький Enhc:

 .content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}
  

CSS:

 .outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  height: 60%;
  padding: 10px;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}
h2 {
  margin-top: 0;
}
  

У вас h2 есть «собственный» запас, который добавляется к main-body высоте и разбивает процент. Удалите это поле. Тогда у вас main-body есть отступы, которые также добавляют дополнительные пиксели. Удалите его, и 90% 10% он подойдет 100% .

 h2 {
    margin: 0;
}

.outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  max-height: 60%;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: 90%;
  background: blue;
  padding: 10px;
  overflow: auto;
}  

 <div class="outer-layer">
  <div class="main-body">
    <div class="header">
      <h2>Hello</h2>
      <!--header-->
    </div>
    <div class="content">
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <p>dynamic content</p>
      <!--content-->
    </div>
    <!--body-->
  </div>
  <!--overlay-->
</div>  

вам нужно добавить высоту к родительскому элементу, т.е .main-body

  .main-body{
        height:72%;    /* added */
        padding:0px;  /* editied  */
    }
    .header{
      height:20%;   /* edited*/
      max-height:20%; /* edited but actually not needed to have max height */
    }