0

Имеется div, занимающий 100% высоты экрана. Внутри него помещен другой div, также занимающий 100% высоты, о нем и речь. Иногда во внутреннем блоке много содержимого, появляется прокрутка. Однако после последнего дочернего элемента нет нижнего паддинга, хотя инспектор браузера показывает его наличие, просто дочерние элементы налезают на него. Вопрос - как добиться отображения нижнего поля блока?

Максимально удалила лишнее, вот что имеется сейчас: https://jsfiddle.net/Ponio/u76k34xc/15/

Пока писала вопрос, обнаружилось, что нижний паддинг отсутствует в Firefox и IE11, в Опере отображается, как надо.

.height {
  height: 100%;
  margin: 0px 0px 0px 0px;
  background-color: black;
}
.map {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 50px);
  background-color: blue;
}
#panel {
  background-color: yellow;
  position: absolute;
  z-index: 8;
  height: 100%;
  width: 400px;
  opacity: 0.92;
  float: right;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  padding: 70px;
  cursor: default;
}
#panel.hidden {
  right: -400px;
}
#panel.shown {
  right: 0px;
  overflow-y: auto;
}
#panel label {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
#panel p {
  margin-top: 10px;
  vertical-align: middle;
  display: flex;
  background-color: red;
  justify-content: space-between;
}
#panel input,
#panel textarea {
  padding: 10px;
}
#panel input,
#panel textarea,
#panel select {
  border: 2px solid #cacfb4;
  border-radius: 5px;
  padding-left: 10px;
  outline: none;
  font-size: 1em !important;
  font-family: "PT Serif", serif !important;
}
#panel input.half {
  width: 175px;
  float: right;
}
#panel.shown {
  right: 0px;
  overflow-y: auto;
}
<div id="map_container" class="map">
  <div id="map" class="height">
    <div id="panel" class="shown">
      <p>
        <label>Some text</label>
      </p>
      <p>
        <label>Текст1:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст2:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст3:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст4:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст5:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст6:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст7:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст8:</label>
        <input type="text" class="half" />
      </p>
      <p>
        <label>Текст9:</label>
        <input type="text" class="half" />
      </p>
    </div>
  </div>
</div>

7
  • .height не занимает 100% высоты экрана и второй блок тоже. Добавьте код сюда и выделите разноцветными бордерами нужные блоки. А то я так и не понял, где должен быть паддинг.
    – user212578
    Commented 21 июл. 2016 в 21:26
  • Больше ста? Ну предположим. Это как-то влияет на паддинг? Сейчас в примере появляется дополнительный скролл, на сайте его нет.
    – Ponio
    Commented 21 июл. 2016 в 21:30
  • Они вообще не занимают места в хроме. Контента в них нет, а тот, что есть - абсолютно спозиционирован и выпал из потока.
    – user212578
    Commented 21 июл. 2016 в 21:32
  • Скроллинг происходит внутри абсолютно позиционированного дива, высота которого 100vh, а не внутри того, о котором Вы написали.
    – user212578
    Commented 21 июл. 2016 в 21:42
  • Добавила код, в .height вообще-то вставляется карта, а тут действительно нет контента. Как бороться с выпадением из потока? Паддинг должен быть после Текст9, в Опере он есть, в Мозилле - нет.
    – Ponio
    Commented 21 июл. 2016 в 21:44

1 ответ 1

1

Решила проблему, установив margin для внутренних элементов вместо padding родительского блока:

.height {
  height: 100%;
  margin: 0px 0px 0px 0px;
  background-color: black;
}
.map {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 50px);
  background-color: blue;
}
#panel {
  background-color: yellow;
  position: absolute;
  z-index: 8;
  height: 100%;
  width: 400px;
  opacity: 0.92;
  float: right;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  /*padding: 70px;*/
  cursor: default;
}
#panel.hidden {
  right: -400px;
}
#panel.shown {
  right: 0px;
  overflow-y: auto;
}
#panel label {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
#panel p {
  margin-top: 10px;
  vertical-align: middle;
  display: flex;
  background-color: red;
  justify-content: space-between;
}
#panel input,
#panel textarea {
  padding: 10px;
}
#panel input,
#panel textarea,
#panel select {
  border: 2px solid #cacfb4;
  border-radius: 5px;
  padding-left: 10px;
  outline: none;
  font-size: 1em !important;
  font-family: "PT Serif", serif !important;
}
#panel input.half {
  width: 175px;
  float: right;
}
#panel.shown {
  right: 0px;
  overflow-y: auto;
}
.in-panel{
  margin-left: 70px;
  margin-right: 70px;
}
.in-panel:first-child{
  margin-top: 70px !important;
}
.in-panel:last-child{
  margin-bottom: 70px;
}
<div id="map_container" class="map">
  <div id="map" class="height">
    <div id="panel" class="shown">
      <p class="in-panel">
        <label>Some text</label>
      </p>
      <p class="in-panel">
        <label>Текст1:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст2:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст3:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст4:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст5:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст6:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст7:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст8:</label>
        <input type="text" class="half" />
      </p>
      <p class="in-panel">
        <label>Текст9:</label>
        <input type="text" class="half" />
      </p>
    </div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.