缩放时子div背景颜色不适合父div

根据浏览器的缩放级别,子 div 的背景颜色有一个奇怪的行为。出现一些空白。

请参阅以下示例:

缩放 125%:

缩放 150%:

缩放 175%:

缩放 200%:

这是我的代码:

(JSFiddle:https ://jsfiddle.net/3L4wfvyg/ )

$(document).ready(function () {
    document.getElementById("HeaderContainer").addEventListener("click", function (e) {
        if (e.target.id != "FormContainer") {
            document.getElementById("Container3").classList.toggle("clicked");
            document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
        };
    });
});
.Container1 {
  background-color: white;
  line-height: 30px;
  font-size: 20px;
  color: black;
  border: none;
  position: absolute;
}

.Container1 h3 {
  font-size: 30px;
  color: #142D41;
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
}

.Container1 .Container3 {
  padding: 30px;
  display: block;
  border: 1px solid black;
  border-radius: 5px;
  margin-top: 15px;
  font-size: 15px;
  min-width: 100%;
  background-color: white;
  text-align: left;
  height: 100px;      
  overflow: hidden;
}
.Container1 .Container3:hover {
  text-decoration: none !important;
  cursor: pointer;
}            

.HeaderContainer3:hover {
  color: white !important;
  background-color: blue;
}

.HeaderContainer2 {
  padding: 30px;
}

.HeaderContainer1 {
  z-index: 10;
  position: relative;
  margin: -31px;
  padding: 32px 30px 25px 30px;
  width: auto;
}

.FormContainer {
  font-size: 20px !important;
}

#Container3 {
  height: 0px;
  transition: height 300ms ease-in-out;
  box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}

#Container3.clicked {
  height: 314px;
}

.Header {
  position: relative;
  padding-top: 6px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
  <h3>Title
  </h3>
  <div>

    <div>
      <div>
        <div>Header</div>
      </div>
      <div>
        <hr />
        <div>
          Form
        </div>
        <br />
        <div>
          <div>
            <b>First</b>
            <br />
          </div>
          <div>
            <b>Last</b>
            <br />
          </div>
          <div>
            <b>Third</b>
            <br />
          </div>
          <div>
            <br />
            <button>
              Submit
            </button>
          </div>
        </div>
        <br />
      </div>
    </div>
  </div>
</div>
以上是缩放时子div背景颜色不适合父div的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>