以百分比表示的 div 高度未按预期工作

Question

在卡片里面我有大小宽度：160px；高度：90px；现在我想把它分成两部分，一个是宽度：70%；高度：100%；第二部分宽度：30%；高度：100%；

我没有得到预期的输出。

我希望这两个分区不应该从它应该适合的主 div 溢出。

expected screen four Im getting this

   

     const layoutmodel = document.querySelector('#my-layoutmodel');
            const layoutmodelpopmodalBtn = document.querySelector('#editlayout-btn');
            const layoutmodelcloseBtn = document.querySelector('#layoutmodelclose ');
        
            // Events
            layoutmodelpopmodalBtn.addEventListener('click', openpopmodal);
            layoutmodelcloseBtn.addEventListener('click', closepopmodal);
            window.addEventListener('click', outsideClick);
        
            // Open
            function openpopmodal() {
              layoutmodel.style.display = 'block';
            }
        
            // Close
            function closepopmodal() {
              layoutmodel.style.display = 'none';
            }
        
            // Close If Outside Click
            function outsideClick(e) {
              if (e.target == layoutmodel) {
                layoutmodel.style.display = 'none';
              }
            }

   

     :root {
          --layoutmodel-duration: 1s;
          --layoutmodel-color: #428bca;
        }
    
        .layoutmodel {
          display: none;
          position: fixed;
          z-index: 1;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          overflow: auto;
          /*border-radius: 25px;overflow: auto;*/
          /*background-color: rgba(0, 0, 0, 0.5);*/
        }
    
        .layoutmodel-content {
          margin: 10% auto;
          width: 80%;
          box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
          animation-name: layoutmodelopen;
          animation-duration: var(--layoutmodel-duration);
          border-radius: 25px;
        }
    
        .layoutmodel-header h2,
        .layoutmodel-footer h3 {
          margin: 0;
        }
    
        .layoutmodel-header {
          background: var(--layoutmodel-color);
          padding: 40px;
          color: #fff;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
    
        .layoutmodel-body {
          padding: 10px 20px;
          background: white;
        }
    
        .layoutmodel-footer {
          background: var(--layoutmodel-color);
          padding: 10px;
          color: #fff;
          text-align: center;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
    
        .close {
          color: #ccc;
          float: right;
          font-size: 30px;
          color: #fff;
        }
    
        .close:hover,
        .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }
    
        .gridcard {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          transition: 0.3s;
          width: 99%;
          height: 99%;
          border-radius: 5px;
        }
    
        .gridcard:hover {
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }
    
        @keyframes layoutmodelopen {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        .zone {
          background-color: rgb(76, 77, 82);
          box-shadow: rgb(255 255 255) 0px 0px 0px 1px;
          color: rgb(255, 255, 255);
          font-size: 0.625em;
          line-height: 0.75;
          padding: 2px;
        }
    
    .four #zone1 {
            width: 70%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 10;
        overflow: hidden;
    }
    
    .four #zone2 {
            width: 30%;
        height: 100%;
        top: 0px;
        left: 70%;
        z-index: 10;
        overflow: hidden;
    }

    <button id="editlayout-btn" style="background-color:white;
                        color: black;border-radius: 5px;border-width: 1px;box-shadow: 1px 1px gray;width: 100%;padding: 8px;font-size: 18px;"><b>Edit Layout</b></button>
    
        <div id="my-layoutmodel" class="layoutmodel">
          <div class="layoutmodel-content">
            <div class="" style="background-color:black;height: 60px;display: inline-block;display: flex;justify-content: space-between;border-radius: 3px;padding: 10px;">
              <h2 style="color:black;font-size:18px;padding:10px;color: white;">Channel Size</h2>
              <span class="close" id="layoutmodelclose" style="color: white;float: right;font-size: 25px;padding-right:10px">&times;</span>
            </div>
            <div class="layoutmodel-body" style="border-radius: 3px;">
    
              <div class="gridbuttom" style="margin-top:5px;margin-bottom: 5px;">
                <button class="" id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;">Not Now</button>
                <button id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;" onclick="changescreen()">Confirm</button>
              </div>
    
              <div style="height: 500px;overflow-y: auto;">
    
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
                  <!-- ** -->
                  <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
                    <div style="width:160px;height:90px;max-height: 90px;max-width: 160px;background-color: black;margin-bottom: 20px;color: white;overflow: hidden;">
    
                      <div class="one">
                        <div class="zone " style="height: 80%; width: 100%;">
                          <span>1</span>
                        </div>
                        <div class="zone " style="height: 20%; width: 100%;">
                          <span>2</span>
                        </div>
                      </div>
    
                    </div>
                    <span>Main</span>
                  </div>
                  <!-- ** -->
                </div>
    
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
                  <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
                    <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">
    
                    </div>
                    <span>Main</span>
                  </div>
    
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
                  <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
                    <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">
    <div class="four" style="height:100%;width:100%">
    
                          <div class="zone " id="zone1" >
                            <span>1</span>
                          </div>
                          <div class="zone " id="zone2" >
                            <span>2</span>
                          </div>
                        
                        </div>
                    </div>
                    <span>Main</span>
                  </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
                  <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
                    <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">
    
                    </div>
                    <span>Main</span>
                  </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
                  <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
                    <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">
    
                    </div>
                    <span>Main</span>
                  </div>
                </div>
    
    
    
              </div>
    
    
    
    
    
    
    
    
              <div class="gridbuttom" style="margin-top:10px;margin-bottom: 10px;">
                <button class="" id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;">Not Now</button>
                <button id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;" onclick="changescreen()">Confirm</button>
              </div>
            </div>
          </div>

Answer 1

你的问题是你父母的身高。你的父元素的高度应该是 100%。实际上，当您使用百分比为元素设置高度时，它是由其父元素计算的。在您的代码 sn-p 中，子元素确实具有其父高度的 20% 和 80%，但问题是您的父元素具有 100% 的高度，因此您会发现高度存在问题。因此，如果您将 height: 100% 设置为父元素（代码 sn-p 中具有类 1 的元素），如您在下面附加的代码 sn-p 中所见，您的问题就会消失：

const layoutmodel = document.querySelector('#my-layoutmodel');
const layoutmodelpopmodalBtn = document.querySelector('#editlayout-btn');
const layoutmodelcloseBtn = document.querySelector('#layoutmodelclose ');

// Events
layoutmodelpopmodalBtn.addEventListener('click', openpopmodal);
layoutmodelcloseBtn.addEventListener('click', closepopmodal);
window.addEventListener('click', outsideClick);

// Open
function openpopmodal() {
  layoutmodel.style.display = 'block';
}

// Close
function closepopmodal() {
  layoutmodel.style.display = 'none';
}

// Close If Outside Click
function outsideClick(e) {
  if (e.target == layoutmodel) {
    layoutmodel.style.display = 'none';
  }
}

:root {
  --layoutmodel-duration: 1s;
  --layoutmodel-color: #428bca;
}

.layoutmodel {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  /*border-radius: 25px;overflow: auto;*/
  /*background-color: rgba(0, 0, 0, 0.5);*/
}

.layoutmodel-content {
  margin: 10% auto;
  width: 80%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: layoutmodelopen;
  animation-duration: var(--layoutmodel-duration);
  border-radius: 25px;
}

.layoutmodel-header h2,
.layoutmodel-footer h3 {
  margin: 0;
}

.layoutmodel-header {
  background: var(--layoutmodel-color);
  padding: 40px;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.layoutmodel-body {
  padding: 10px 20px;
  background: white;
}

.layoutmodel-footer {
  background: var(--layoutmodel-color);
  padding: 10px;
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.gridcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 99%;
  height: 99%;
  border-radius: 5px;
}

.gridcard:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

@keyframes layoutmodelopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.zone {
  background-color: rgb(76, 77, 82);
  box-shadow: rgb(255 255 255) 0px 0px 0px 1px;
  color: rgb(255, 255, 255);
  font-size: 0.625em;
  line-height: 0.75;
  padding: 2px;
}

<button id="editlayout-btn" style="background-color:white;
                color: black;border-radius: 5px;border-width: 1px;box-shadow: 1px 1px gray;width: 100%;padding: 8px;font-size: 18px;"><b>Edit Layout</b></button>

<div id="my-layoutmodel" class="layoutmodel">
  <div class="layoutmodel-content">
    <div class="" style="background-color:black;height: 60px;display: inline-block;display: flex;justify-content: space-between;border-radius: 3px;padding: 10px;">
      <h2 style="color:black;font-size:18px;padding:10px;color: white;">Channel Size</h2>
      <span class="close" id="layoutmodelclose" style="color: white;float: right;font-size: 25px;padding-right:10px">&times;</span>
    </div>
    <div class="layoutmodel-body" style="border-radius: 3px;">

      <div class="gridbuttom" style="margin-top:5px;margin-bottom: 5px;">
        <button class="" id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;">Not Now</button>
        <button id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;" onclick="changescreen()">Confirm</button>
      </div>

      <div style="height: 500px;overflow-y: auto;">

        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
          <!-- ** -->
          <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
            <div style="width:160px;height:90px;max-height: 90px;max-width: 160px;background-color: black;margin-bottom: 20px;color: white;overflow: hidden;">

              <div class="one" style="height: 100%">
                <div class="zone " style="height: 80%; width: 100%;">
                  <span>1</span>
                </div>
                <div class="zone " style="height: 20%; width: 100%;">
                  <span>2</span>
                </div>
              </div>

            </div>
            <span>Main</span>
          </div>
          <!-- ** -->
        </div>

        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
          <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
            <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">

            </div>
            <span>Main</span>
          </div>

        </div>
        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
          <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
            <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">

            </div>
            <span>Main</span>
          </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
          <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
            <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">

            </div>
            <span>Main</span>
          </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12" style="float: left;padding: 5px;">
          <div class="gridcard" align="center" style="padding-top: 20%;padding-bottom:10%">
            <div style="width:160px;height:90px;background-color: black;margin-bottom: 20px;" align="center">

            </div>
            <span>Main</span>
          </div>
        </div>



      </div>








      <div class="gridbuttom" style="margin-top:10px;margin-bottom: 10px;">
        <button class="" id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;">Not Now</button>
        <button id="" style="width: 49%;border: white;padding: 10px;border-radius: 5px;" onclick="changescreen()">Confirm</button>
      </div>
    </div>
  </div>