页脚没有响应应有的响应

Question

代码大部分是响应式的，但它会创建空白，并且“营业时间”部分不会位于其他部分的下方。我尝试对代码的另一部分使用类似的媒体查询，但这并不公平。我还查看了其他一些帖子并通读了它们，但无论哪种方式都没有真正的效果。请帮忙！

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html, body {
    background: white;
    height: 100%;
}

.page-wrapper {
    min-height: 100%;
}

.footer {
    background: #e1306c;
    color: white;
    height: 400px;
    position: relative;
}

.footer .footer-content {
    border: 1px solid;
    height: 350px;
    display: flex;
    width: 100%;

}

.footer-content1 {
    width: 50%;
    display: inline-block;
}

.footer .footer-content .footer-section {
    flex: 1;
    border: 1px solid white;
    padding: 25px;
} 

.footer .footer-content h3 {
    color: white;
    font-size: 35px;
    font-weight: 1500;
    padding-bottom: 1em;
}

.footer .footer-content .about h3 span {
    color: #00bfff;
}

.footer .footer-content .about p {
    padding-bottom: 1em;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.footer .footer-content .about .socials a {
    border: 3px solid #00bfff;
    width: 45px;
    height: 41px;
    padding-top: 5px;
    margin-right: 5px;
    text-align: center;
    display: inline-block;
    font-size: 1.3em;
    border-radius: 5px;
    color: white;
    transition: all .3s;
}

.footer .footer-content .about .socials a:hover {
    background: white;
    color: #e1306c;
    transition: all .3s;
}

.footer .footer-content .hours ul a {
    display: block;
    font-size: 1.2em;
    text-decoration: none;
    list-style: none;
    color: white;
    transition: all .3s;
}

.footer .footer-content .hours ul a:hover {
    color: #00bfff;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-bottom {
    background: #00bfff;
    position: absolute;
    color: white;
    height: 50px;
    text-align: center;
    bottom: 0px;
    left: 0;
    padding-top: 20px;
    width: 100%;
}

@media (max-width: 900px) {
    .footer-content {
        display: flex;
        flex-direction: column;
    }

   
}

    <div class="footer">
        <div class="footer-content">

            <div class="footer-section about">
            <h3 class="logo-text"><span>Name </span>of Company</h3>
            <p>lorem zggz gsrggsrhrssrg rsrshsrh srhrs hsrhrs hrshsrhrshsr srhrdhrdsh srhsrhsrh rshrhdhrshsrh egeg</p>
            <div class="contact">
                <span><i class="fas fa-phone"></i> &nbsp; 000-000-0000</span>
                <span><i class="fas fa-envelope"></i> &nbsp; company@gmail.com </span>
            </div>
            <div class="socials">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-whatsapp"></i></a>
            </div>
        </div>
        
            <div class="footer-section hours">
                <h3>Opening Hours</h3>
                <br>
                <ul>
                    <a href="#"><li>MON - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>TUE - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>WED - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>THURS - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>FRI - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>SAT - CLOSED</li></a>
                    <a href="#"><li>SUN - CLOSED</li></a>
                </ul>
            </div>
        

        <div class="footer-bottom">
            &copy; Name | Designed by Devz
        </div>
        </div>
    </div>

Answer 1

您似乎忘记在页脚和页脚内容中添加height:auto;。

请在 sn-p 中查看以下解决方案。

如果还需要什么，请告诉我。

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html, body {
    background: white;
    height: 100%;
}

.page-wrapper {
    min-height: 100%;
}

.footer {
    background: #e1306c;
    color: white;
    height: 400px;
    position: relative;
}

.footer .footer-content {
    border: 1px solid;
    height: 350px;
    display: flex;
    width: 100%;

}

.footer-content1 {
    width: 50%;
    display: inline-block;
}

.footer .footer-content .footer-section {
    flex: 1;
    border: 1px solid white;
    padding: 25px;
} 

.footer .footer-content h3 {
    color: white;
    font-size: 35px;
    font-weight: 1500;
    padding-bottom: 1em;
}

.footer .footer-content .about h3 span {
    color: #00bfff;
}

.footer .footer-content .about p {
    padding-bottom: 1em;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.footer .footer-content .about .socials a {
    border: 3px solid #00bfff;
    width: 45px;
    height: 41px;
    padding-top: 5px;
    margin-right: 5px;
    text-align: center;
    display: inline-block;
    font-size: 1.3em;
    border-radius: 5px;
    color: white;
    transition: all .3s;
}

.footer .footer-content .about .socials a:hover {
    background: white;
    color: #e1306c;
    transition: all .3s;
}

.footer .footer-content .hours ul a {
    display: block;
    font-size: 1.2em;
    text-decoration: none;
    list-style: none;
    color: white;
    transition: all .3s;
}

.footer .footer-content .hours ul a:hover {
    color: #00bfff;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-bottom {
    background: #00bfff;
    position: absolute;
    color: white;
    height: 50px;
    text-align: center;
    bottom: 0px;
    left: 0;
    padding-top: 20px;
    width: 100%;
}

@media (max-width: 900px) {
  .footer{height:auto}
    .footer .footer-content {
        display: flex;
        flex-direction: column;
      height:auto;
    }

   
}

<div class="footer">
        <div class="footer-content">

            <div class="footer-section about">
            <h3 class="logo-text"><span>Name </span>of Company</h3>
            <p>lorem zggz gsrggsrhrssrg rsrshsrh srhrs hsrhrs hrshsrhrshsr srhrdhrdsh srhsrhsrh rshrhdhrshsrh egeg</p>
            <div class="contact">
                <span><i class="fas fa-phone"></i> &nbsp; 000-000-0000</span>
                <span><i class="fas fa-envelope"></i> &nbsp; company@gmail.com </span>
            </div>
            <div class="socials">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-whatsapp"></i></a>
            </div>
        </div>
        
            <div class="footer-section hours">
                <h3>Opening Hours</h3>
                <br>
                <ul>
                    <a href="#"><li>MON - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>TUE - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>WED - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>THURS - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>FRI - 8:00AM - 4:00PM</li></a>
                    <a href="#"><li>SAT - CLOSED</li></a>
                    <a href="#"><li>SUN - CLOSED</li></a>
                </ul>
            </div>
        

        <div class="footer-bottom">
            &copy; Name | Designed by Devz
        </div>
        </div>
    </div>

Answer 2

在 .footer 和 .footer .footer-content 中使用 min-height 而不是 height

当它更改为 flex-direction: 列时，您的内容会溢出容器，因为它仍然具有设定的高度。

.footer {
    background: #e1306c;
    color: white;
    min-height: 400px;
    position: relative;
}

.footer .footer-content {
    border: 1px solid;
    min-height: 350px;
    display: flex;
    width: 100%;
}

Answer 3

通过删除 absolute position 为 footer-bottom 我想你得到了你所期望的。

.footer .footer-bottom {
    background: #00bfff;
//    position: absolute;
    color: white;
    height: 50px;
    text-align: center;
//    bottom: 0px;
//    left: 0;
    padding-top: 20px;
    width: 100%;
}

Answer 4

要使您的网页/网站具有响应性，请使用 Viewport Units，例如 vw 用于 width 和 vh 用于 height 而不是 @987654323 @、em 或 %。 （注意：- 1vw=0.5cm）

例如，使用height: 3.66vw; 而不是height: 50px;。

试试吧，它肯定会起作用，但如果它没有让我知道在 cmets 中，我会尽力帮助你。