Имеется 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>