Question

我正在使用Here is what it looks like. 样式的管理面板。当我将一个大表格作为注册页面时，页脚看起来很奇怪。 here.我是css的初学者，所以我希望有人可以帮助我如何使这看起来正确。页脚应该看起来像登录，如{{3}}我没有用标准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>

当我检查页脚时，它就是这样说的：

.login-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 30px;
background-color: white;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
}

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

Answer 1

你的问题对我来说有点不清楚，如果你的问题只是你觉得页脚太高了，你应该尝试这样的css max-width属性：

.footer {
  max-width:120px;
}

如果你想要一个粘在底部的页脚，你应该查看Ryan Fait's CSS Sticky Footer。代码非常简单，它会强制页脚始终保持在底部。

将页脚包装在.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> - 元素，就像有些人评论的那样。

奇怪的页脚风格

1 个答案: