Question

我正在使用Wordpress，但无法使页脚停留在网页底部。我有一个page.php，这意味着我对所有页面使用相同的界面，但我在Wordpress中编辑的页面内容除外。在某些页面上，它可以正常工作，但是在内容较少的页面上（如果有意义，请减少垂直文本）在页面中间，并在底部创建空白。这是我用于页脚atm的CSS。

.footer-nav {
    display: block;
    width: 100%;
    height: 200px;
    background-image: url(/pics/bannerbottom.jpg);
    background-size: 100% 120%;
    padding: 20px;
    position: relative;
    clear: both;
    bottom: 0;
    margin-top: 100px;
    float: left;
}

.foot-container {
    bottom: 0;
}

HTML只是一个简单的div。

<div class="foot-container">
    <div class="footer-nav"></div>
</div>

Answer 1

您可以尝试在内容中添加最小高度。

例如，如果这是您的内容：

<div class="wrapper">
  Content goes here
</div>

将以下CSS添加到（在这种情况下）.wrapper：

.wrapper{
  min-height:100%;
}

您当然可以根据需要更改最小高度的大小。

Answer 2

以下代码将页脚始终放在底部，无论您有多少内容都可以：

 body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: max-content max-content 1fr max-content;
    grid-template-columns: 100%;
}

Answer 3

我将固定页脚的位置：

D:\cmd
λ kubectl -n gdpr-tr get all
NAME                                              READY     STATUS             RESTARTS   AGE
pod/scv-turkey-iys-integration-6dd784689f-z6hqc   0/1       InvalidImageName   0          1m
pod/scv-turkey-iys-integration-79c4d7ffcd-pwmq4   0/1       ErrImagePull       0          6m

NAME                                         DESIRED   CURRENT   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/scv-turkey-iys-integration   1         2         1            0           1h

NAME                                                    DESIRED   CURRENT   READY     AGE
replicaset.apps/scv-turkey-iys-integration-6998c5b5f9   0         0         0         1h
replicaset.apps/scv-turkey-iys-integration-6dd784689f   1         1         0         34m
replicaset.apps/scv-turkey-iys-integration-79c4d7ffcd   1         1         0         25m

D:\cmd
λ kubectl -n gdpr-tr delete deployment.apps/scv-turkey-iys-integration
Error from server (NotFound): the server could not find the requested resource

我的页脚不停留在页面底部

3 个答案: