区段与另一节重叠

Question

我在定位方面有问题，除了最后一节contactform之外，一切都很好。问题是，当我放大时，contactform与服务部分重叠。下面是代码：

​

.services {
  width: 100%;
  height: 160vh;
  margin: 100px 0;
  position: relative;
}

.services-content {
  /* position: relative; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-content h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.content-row-one {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
  margin-top: 100px;
}

.row-one {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.quality-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.testing-calibration {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.testing-calibration h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.medical-devices {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.medical-devices h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-two {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-two {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.lead-auditor {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.lead-auditor h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.project-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 24px;
  margin: 0px 60px;
}

.project-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.quality-assurance {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-assurance h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-three {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-three {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.document-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.document-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.contactform {
  width: 100%;
  height: 50vh;
  position: relative;
}

.contact {
  width: 100%;
  height: 100%;
  text-align: center;
}

.contact h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.contact-content {
  width: 70%;
  height: 100%;
  display: flex;
  /* justify-content: center;
  text-align: center; */
  margin: 0 auto;
  /* position: absolute; */
  margin-top: 50px;
}

.contact-column-one {
  width: 33%;
  height: 50%;
}

.contact-column-one .location i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-one .location i:hover{
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-one h1 {
  font-size: 30px;
}

.contact-column-two {
  width: 33%;
  height: 50%;
}

.contact-column-two .phone i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-two .phone i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-two h1 {
  font-size: 30px;
}

.contact-column-three {
  width: 33%;
  height: 50%;
}

.contact-column-three .email i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-three .email i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-three h1 {
  font-size: 30px;
}

<section class="services" id="services">
        <div class="services-content">
            <h1>OUR SERVICES</h1>
            <div class="content-row-one">
                <div class="row-one">
                    <div class="quality-management">
                        <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="testing-calibration">
                        <h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="medical-devices">
                        <h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-two">
                <div class="row-two">
                    <div class="lead-auditor">
                        <h6>4. Lead Auditor according to ISO 9001</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="project-management">
                        <h6>5. Project Management</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="quality-assurance">
                        <h6>6. Quality Assurance</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-three">
                <div class="row-three">
                    <div class="document-management">
                        <h6>7. Document Management with SharePoint Server</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="contactform" id="contactform">
            <div class="contact">
                <h1>CONTACT US</h1>
                <div class="contact-content">
                    <div class="contact-column-one">
                        <span class="location">
                            <i class="material-icons">
                                place
                            </i>
                        </span>
                        <h1>ADDRESS</h1>
                        <p>Address</p>
                    </div>
                    <div class="contact-column-two">
                        <span class="phone">
                            <i class="material-icons">
                                phone
                            </i>
                        </span>
                        <h1>PHONE</h1>
                        <p>Phone Number</p>
                    </div>
                    <div class="contact-column-three">
                        <span class="email">
                            <i class="material-icons">
                                email
                            </i>
                        </span>
                        <h1>EMAIL</h1>
                        <p>Email</p>
                    </div>
                </div>
            </div>
        </section>

​

我试过移除位置，从绝对移到相对位置，反之亦然，但没有什么改变。如果您需要更多的代码或解释，请随时询问。谢谢您抽时间见我!

这是一张照片：

​

Answer 1

虽然您有一个固定的height用于.services，但当内容总高度高于.services height时，它总是会重叠，相反，您可以使用min-height，因此如果内容高度低于160vh，则高度将保持为160vh，但如果内容高度大于160vh，.services height将与内容相应增长。

​

.services {
  width: 100%;
  min-height: 160vh;
  margin: 100px 0;
  position: relative;
}

.services-content {
  /* position: relative; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.services-content h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.content-row-one {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
  margin-top: 100px;
}

.row-one {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.quality-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.testing-calibration {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.testing-calibration h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.medical-devices {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.medical-devices h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-two {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-two {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.lead-auditor {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.lead-auditor h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.project-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 24px;
  margin: 0px 60px;
}

.project-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.quality-assurance {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-assurance h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.content-row-three {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-three {
  display: flex;
  width: 85%;
  height: 300px;
  margin: 20px 30px;
}

.document-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.document-management h6 {
  font-size: 18px;
  text-transform: uppercase;
}

.contactform {
  width: 100%;
  height: 50vh;
  position: relative;
}

.contact {
  width: 100%;
  height: 100%;
  text-align: center;
}

.contact h1 {
  font-size: 40px;
  letter-spacing: 4px;
}

.contact-content {
  width: 70%;
  height: 100%;
  display: flex;
  /* justify-content: center;
  text-align: center; */
  margin: 0 auto;
  /* position: absolute; */
  margin-top: 50px;
}

.contact-column-one {
  width: 33%;
  height: 50%;
}

.contact-column-one .location i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-one .location i:hover{
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-one h1 {
  font-size: 30px;
}

.contact-column-two {
  width: 33%;
  height: 50%;
}

.contact-column-two .phone i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-two .phone i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-two h1 {
  font-size: 30px;
}

.contact-column-three {
  width: 33%;
  height: 50%;
}

.contact-column-three .email i {
  font-size: 50px;
  cursor: pointer;
}

.contact-column-three .email i:hover {
  color: rgb(19, 112, 233);
  transition: .5s;
}

.contact-column-three h1 {
  font-size: 30px;
}

<section class="services" id="services">
        <div class="services-content">
            <h1>OUR SERVICES</h1>
            <div class="content-row-one">
                <div class="row-one">
                    <div class="quality-management">
                        <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="testing-calibration">
                        <h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="medical-devices">
                        <h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-two">
                <div class="row-two">
                    <div class="lead-auditor">
                        <h6>4. Lead Auditor according to ISO 9001</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="project-management">
                        <h6>5. Project Management</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                    <div class="quality-assurance">
                        <h6>6. Quality Assurance</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
            <div class="content-row-three">
                <div class="row-three">
                    <div class="document-management">
                        <h6>7. Document Management with SharePoint Server</h6>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit
                            sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores
                            porro
                            quo perferendis accusamus!</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="contactform" id="contactform">
            <div class="contact">
                <h1>CONTACT US</h1>
                <div class="contact-content">
                    <div class="contact-column-one">
                        <span class="location">
                            <i class="material-icons">
                                place
                            </i>
                        </span>
                        <h1>ADDRESS</h1>
                        <p>Address</p>
                    </div>
                    <div class="contact-column-two">
                        <span class="phone">
                            <i class="material-icons">
                                phone
                            </i>
                        </span>
                        <h1>PHONE</h1>
                        <p>Phone Number</p>
                    </div>
                    <div class="contact-column-three">
                        <span class="email">
                            <i class="material-icons">
                                email
                            </i>
                        </span>
                        <h1>EMAIL</h1>
                        <p>Email</p>
                    </div>
                </div>
            </div>
        </section>

​

Answer 2

您应该设置height: auto;

小提琴手：https://jsfiddle.net/qhsygpb5/

说明:当您设置“高度:200 be”元素时，不管包含多少内容，元素的高度都将是200 be。其他的解决方案是添加“溢出:隐藏”，但是如果没有空间，就不会看到所有的内容。如果您想要滚动200 if高度内的内容，也可以添加“溢出:滚动”。