这个问题已经针对每个组件被问过好几次了,如下所示:
- 如何保持导航栏固定
- 如何固定页脚
- 如何让div在页面中间居中
我想要实现的是同时拥有所有东西
我想在页面中间(水平和垂直)居中放置一个登录面板,但页脚有一些问题
- 我希望该页面能够在手机上正确呈现。登录区域不应位于页眉或页脚下方。
- 当页面显示时,我希望显示页脚。目前我需要向下滚动才能看到页脚。登录表单和页脚之间的空间太大。页脚需要固定在底部。
- 如果可能,登录表单应该更宽和更高
谢谢你的帮助
这是我需要弄清楚如何配置的关键部分
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: 100%;
/* Negative indent footer by its height */
margin: 140px 0 -200px 0;
/* Pad bottom by footer height */
padding: 0;
}
请参阅 jfiddle here供您引用
此刻
___________________________________________________ _ Visible Page
|Navbar | |
| | |
|_________________________________________________| |
| | |
| | |
| | |
| ^ | |
| | Too much space | |
| | | |
| | |
| _______________ | |
| | | | |
| | Login Area | | |
| |_______________| | |
| | |
| | |
| | |
| | |
| ^ | _|
| | Too much space |
| | |
| |
| |
| |
| |
| |
|_________________________________________________|
| Footer |
|_________________________________________________|
我想要什么
___________________________________________________ _ Visible Page
|Navbar | |
| | |
|_________________________________________________| |
| | |
| | |
| | |
| | |
| _____________________ | |
| | | | |
| | | | |
| | Login Area | | |
| | | | |
| |_____________________| | |
| | |
| | |
| | |
| | |
|_________________________________________________| |
| Footer | |
|_________________________________________________| _|
最佳答案
这就是您可以做到的。查看一个有效的 bootply 示例 here .
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
#footer {
position: fixed;
width: 100%;
display: block;
bottom: 0;
}
.center{
position: absolute;
height: 50px;
width: 50px;
background:red;
top:calc(50% - 50px/2); /* height divided by 2*/
left:calc(50% - 50px/2); /* width divided by 2*/
}
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="center">
login goes here
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">Centered login footer.</p>
</div>
</div>
关于html - 粘性页脚导航栏和居中登录面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35504711/