页脚在我的网站上没有响应。 （使用bootstrap）

Question

我一直在Visual Studio ASP.NET中的一个网站上工作。我的页脚有问题，因为它没有响应。为了清楚起见，我可以展示2个问题的图像。

全屏：

Iphone尺寸：

我不确定导致问题的原因是什么，因为如果我制作一个普通版和一个col-md-4 x3那么它的工作正常，但是它内部工作正常。

我的代码：

    <!-- Foooter
================== -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <!-- Contact us form -->
                <div class="col-md-4">
                    <div class="headline">
                        <h3>CONTACT US</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            San Francisco, CA 94101<br />
                            1987 Lincoln Street<br />
                            Phone: +0 000 000 00 00<br />
                            Fax: +0 000 000 00 00<br />
                            Email: admin@mysite.com
                        </p>
                    </div>
                </div>
                <!-- Go social -->
                <div class="col-md-4">
                    <div class="headline">
                        <h3>GO SOCIAL</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Get in toach with us:
                        </p>
                    </div>
                </div>
                <!-- Subscibe -->
                <div class="col-md-4">
                    <div class="headline">
                        <h3>SUBSCRIBE</h3>
                    </div>
                    <hr />
                    <div class="content">
                        <p>
                            Subscribe here:
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

CSS：

来自bootstrap.css

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
}

footer {
    background-color: #3f8797;
    position: absolute;
    bottom: 0;   
    color: white;
    width: 100%;
    height: 230px;
    font-family: 'Lato', sans-serif;    
}

来自Site.css文件

body {
    padding-top: 50px;
    padding-bottom: 235px;

}

.body-content {
    padding-left: 30px;
    padding-right: 30px;
}

全屏标题应该是 - ＆gt;始终在底部（不是固定位置），但现在它没有响应..

希望有人能看出错误。

Answer 1

要获得所需的结果，您需要进行媒体查询，将页脚放置在屏幕底部的中型屏幕上，然后再将其放置在较小设备上的内容底部。如此Pen，

所示

我更改了页脚的默认样式：

footer {
    background-color: #3f8797; 
    color: white;
    width: 100%;
    font-family: 'Lato', sans-serif;    
}
body {
    padding-top: 50px;
}

然后在设备> 992px bootstraps medium breakpoint上，我们将页脚重新定位在底部。

@media (min-width: 992px) {
    body {
        padding-bottom: 235px;
    }
    footer {
        position: absolute;
        bottom: 0;   
        width: 100%;
        height: 230px;   
    }
}

或者您可以根据页脚Pen中的内容调整填充大小，这是手动的，但使用javascript可以使相同的效果更加动态。

footer {
    background-color: #3f8797; 
    color: white;
    width: 100%;
    font-family: 'Lato', sans-serif;    
}
body {
    padding-top: 50px;
}

@media (min-width: 992px) {
    body {
        padding-bottom: 235px;
    }
    footer {
        position: absolute;
        bottom: 0;   
        width: 100%;
        height: 230px;   
    }
}

Answer 2

变化：

footer {
    background-color: #3f8797;
    position: absolute;
    bottom: 0;   
    color: white;
    width: 100%;
    height: 230px;
    font-family: 'Lato', sans-serif;    
}

为：

footer {
    background-color: #3f8797;
    position: absolute;
    bottom: 0;   
    color: white;
    width: 100%;
    min-height: 230px;
    font-family: 'Lato', sans-serif;    
}

你的路上。