There is a div that occupies 100% of the screen height. Inside it is placed another div , also occupying 100% of the height, about him and talking. Sometimes there is a lot of content in the internal block, scrolling appears. However, after the last child element there is no lower padding, although the browser inspector shows its presence, just child elements cling to it. The question is how to achieve the display of the lower field of the block?

Maximum deleted too much, that's what is available now: https://jsfiddle.net/Ponio/u76k34xc/15/

While writing the question, it was discovered that the bottom padding is missing in Firefox and IE11, in the Opera it is displayed as it should.

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

  • .height does not occupy 100% of the screen height and the second block too. Add the code here and select the necessary blocks with multi-colored boarders. Otherwise, I did not understand where the padding should be. - Russian Bear
  • More than a hundred? Well, suppose. Does it affect padding in any way? Now an additional scroll appears in the example; - Ponio
  • They do not take place in chrome. There is no content in them, and the one that is is absolutely positioned and dropped from the stream. - Russian Bear
  • Scrolling takes place inside an absolutely positioned diva, whose height is 100vh, and not inside the one you wrote about. - Russian Bear
  • I added the code, the map is actually inserted into .height, but there really is no content. How to deal with falling out of a stream? Padding should be after Text9, in the Opera it is, in Mozille it is not. - Ponio

1 answer 1

Solved the problem by setting a margin for the internal elements instead of the parent block 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>