页脚没有像应该的那样响应

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

为了使您的 webpage/website 响应式使用 Viewport Units 例如 vw for width and vh 对于身高而不是 px、em 或 %。 (注:- 1vw=0.5cm)

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

试一试，它肯定会起作用，但如果它不让我在评论中知道，我会尽力帮助你。

Answer 2

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

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

Answer 3

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

请检查代码段中的以下解决方案。

如果还有其他需要，请告诉我。

@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 4

在 .footer 和 .footer .footer-content 中使用最小高度代替高度

当它变为 flex-direction: column 时，您的内容会溢出容器，因为它仍然具有设置的高度。

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

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

页脚没有像应该的那样响应

Footer isn't responsive as responsive as it should be

html

css

media-queries

responsive-design