In div high 100 per cent, the lower padding is not displayed



  • Available divholding 100 per cent of the screen height. There's another inside. divwhich also holds 100 per cent of heights, it and speech. Sometimes there's a lot of contents in the inner block, and there's a wire. However, after the last subsidiary element, there is no lower padding, although the inspector of the browser shows its existence, the subsidiary elements are just on it. The question is, how do we get the image of the lower field of the block?

    Removed the furthest, which is now: https://jsfiddle.net/Ponio/u76k34xc/15/

    While I was writing the question, it was discovered that the lower padding was missing in Firefox and IE11, the Opera displayed the right.

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



  • Resolved the problem by establishing a margin for internal elements instead of padding the parent unit:

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


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2