以下每个组件已经多次询问过这个问题:
我想要实现的是同时拥有所有这些
我想将一个登录面板置于页面中间(水平和垂直),但我的页脚有一些问题
感谢您的帮助
这是我需要弄清楚如何配置
的关键部分/* 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 | |
|_________________________________________________| _|
答案 0 :(得分:2)
这就是你如何做到的。查看有效的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>
答案 1 :(得分:1)
基于CSS3 calc
和视口相关单元的有趣方法:vh
和vw
:
/* In the below @media queries I set body's background to red, in real application appropriate steps should be taken to fit the key elements of webpage and exclude all others */
/* Minimum width we need is 300px (width of login form) */
@media all and (max-width: 300px){
body {
background-color: red;
}
}
/* Minimum height we need is 140px (height of login form plus heights of nav and footer) */
@media all and (max-height: 140px){
body {
background-color: red;
}
}
html, body {
height: 100%;
}
body {
margin: 0;
}
nav {
background-color: lightgreen;
height: 20px;
}
main {
background-color: lightblue;
height: 100px;
/*
Margin from top and bottom:
half of viewport's height minus
half of login form's height minus
half of sum of nav's and footer's heights
Margin from left and right:
half of viewport's width minus
half of login form's width
*/
margin: calc(50vh - 50px - 20px) calc(50vw - 150px);
text-align: center;
width: 300px;
}
footer {
background-color: lightgrey;
bottom: 0;
height: 20px;
position: absolute;
width: 100%;
}
&#13;
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
<main>
Login form<br/>
Login form<br/>
Login form<br/>
Login form<br/>
Login form
</main>
<footer>Footer</footer>
&#13;
<强> View in codepen.com 强>
支持相当不错:
calc
({ {3}},caniuse.com)。vh
和vw
。 calc
s&#39;的图解说明值:
<小时/> 这种方法不是最优雅的方法,但它可能会让你满意。