页脚语义用户界面
Sin*_*ng2 5 html css semantic-ui
嗨，这是我第一次使用语义 ui 框架，我对页脚有一些问题。我想让页脚总是粘在页面的底部（不固定）。
这是我的简单 html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="ui borderless menu">
</nav>
<div class="desc">
</div>
<div class="ui container">
</div>
<div class="ui container">
</div>
<footer class="footer">
</footer>
</body>
</html>
我正在尝试使用这个 css：
body {
position: relative;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
但它不起作用，它只在页面高度小于显示器高度的 100% 时起作用，当它的高度超过显示器高度的 100% 时，页脚将像这样浮动：
我也已经用这个改变了 css 主体： body { position: relative; 最小高度：100%；}
但是还是不行，谁能帮帮忙？
这是完整的代码，我做了一个很长的列表，这样你就会知道当你点击过滤器时，它会将表格向下推，页脚会乱七八糟。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="ui borderless menu">
</nav>
<div class="desc">
</div>
<div class="ui container">
</div>
<div class="ui container">
</div>
<footer class="footer">
</footer>
</body>
</html>
body {
position: relative;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
添加div如下所示的扭曲
<div class="main">
.......
</div>
<div class="footer">
......
</div>
并设置 css
.main{min-height:100%;
padding-bottom:60px;
box-sizing:border-box;}
.footer {
background-color: #212121;
position: absolute;
/* bottom: 0; remove this */
margin-top: -50px; /* add this */
left: 0;
width: 100%;
padding: 15px 0;
}
<div class="main">
.......
</div>
<div class="footer">
......
</div>
.main{min-height:100%;
padding-bottom:60px;
box-sizing:border-box;}
.footer {
background-color: #212121;
position: absolute;
/* bottom: 0; remove this */
margin-top: -50px; /* add this */
left: 0;
width: 100%;
padding: 15px 0;
}
| 归档时间： |
|
| 查看次数： |
10229 次 |
| 最近记录： |