Html 怪异的页脚风格

我正在使用样式管理面板。当我制作一个大表单作为注册页面时，页脚看起来很奇怪。我是css的初学者，所以我希望有人能帮助我如何使它看起来正确。页脚应该看起来像登录名，就像我没有用标准css更改任何内容一样。这是我的密码：

<div class="login-overlay">
    <div class="logo">
        Log IP <br> <span class="smaller">test</span>
    </div>
    <div class="form-container shadow">
        <div class="icon">
            @yield('icon')
            <div class="header">
                @yield('name')
            </div>
        </div>
        <div class="inputs">
            @yield('login-content')                         
        </div>
    </div>
</div>
<footer class="mdl-mini-footer login-footer">
        <div class="mdl-mini-footer__left-section">
                <div class="mdl-logo">&copy;Material Dashboard Theme</div>
            </ul>
        </div>
        <div class="mdl-mini-footer__right-section">
                <div class="mdl-logo">Terms and Conditions Apply</div>
            </ul>
        </div>
</footer>

---

它还说了更多的CSS，但我想这是最重要的部分。解决此问题的最佳方法是什么？

我不太清楚您的问题，如果您认为页脚太高，您应该尝试css

max width

属性，如下所示：

.footer {
  max-width:120px;
}

如果你想要一个粘在底部的页脚，你应该去看看。代码非常简单，它将强制页脚始终保持在底部

将页脚包装在.wrapper中并使用以下css代码：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

---

无论你的问题是什么，你都应该像一些人评论的那样，真正摆脱那些元素。

当你说“怪异”时，你的意思是它太高了吗？这些“”是干什么的？我怀疑高层是否有公开ul（如果有，那就是糟糕的组织）。你试着把它们取下来了吗？@adammtlx页脚通常会完美地贴在底部。当我展开注册表时（这样它就不能放在没有滚动条的页面上），页面就会得到滚动条并可以滚动。当你在页面顶部时，页脚的位置是完美的（就像在给定的超链接中），但是当你向下滚动时，页脚会一直延伸到页面的末尾，白色，文本保持在屏幕截图中的旧位置。基本上从我所看到的，页脚工作正常，但是当有更多内容时（因此，正文高度被扩展）它不会粘到底部。因为下面的页面也是白色的，所以页脚似乎被扩展了。可以尝试将.login footer类的position:absolute更改为position:fixed。这不是最佳解决方案，但您可以检查它对页面的影响。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}