如何在正文和页脚之间获得固定边距
How to get fixed margin between body and footer
我是 CSS 的新手,我正在尝试设置一个页面,以便在页面的主要内容(边栏/部分)之间始终有一个 固定边距/ space ) 和页脚 (例如 120px)应该跨浏览器工作。
此外,如果页面上的内容很少,页脚应始终至少出现在(可见)屏幕的底部。
我通过应用 class footer
进行了多次尝试,包括以下内容,但总是忽略边距。
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>
有人可以帮我解决这个问题吗?
此外,如果关于我的 HTML 有任何更改,请也让我知道。
只需为正文添加样式,边距为 0px。
body{
margin: 0px;
}
为什么使用“:before”?
您的 css 应如下所示:
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
试试这个例子(对我来说效果很好)。
如果它不起作用 - 请确保使用 css 重置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav style="background:grey;height:100px;">
<!-- ... -->
</nav>
<section id="sidebar" style="background:green;height:100px;">
<!-- ... -->
</section>
<section id="main" style="background:red;height:100px;">
<!-- ... -->
</section>
<footer class="footer" style="background:blue;">
<div>Some text</div>
</footer>
</body>
</html>
<style>
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
</style>
要在正文和页脚之间添加边距,只需将其添加到页脚部分的样式中:
padding:20px 0px 0px 0px;
将页脚保持在底部比较复杂。为 css:
尝试这样的事情
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{ /*create a div around whole html body
min-height:100%;
position:relative;
}
#main{
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
color: #333;
}
这应该有帮助:
html, body {
height: 100%;
}
body {
margin:0px;
padding: 0px;
}
.wrap {
height: auto;
margin: 0 auto -80px; /* footer height + space */
min-height: 100%;
padding: 0 0 80px; /* footer height + space */
box-sizing: border-box;
overflow: auto;
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}
<body>
<div class="wrap">
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
</div>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
我知道我来晚了一点,但你也可以用 vh
的一些固定单位来猜测。 Hacky,但它在紧要关头有效。
.wrap {
min-height: 70vh;
}
<div class="wrap">
<section id="chapterone">
<p>Lorem ipsum...</p>
...
</div>
<footer class="footer">
<a href="/">Home</a>
...
</footer>
已解决!
在我的例子中,我将前面的div(如“正文”)的id添加到页脚div上方的div,如下:
<div id="body" class="container">
...
</div>
<div class="row footer-row-bg">
...
</div>
然后,在我的 CSS 文件中,我为该 ID 添加了 padding-bottom:20px;
,如下所示:
#body{
padding-bottom:20px;
}
我是 CSS 的新手,我正在尝试设置一个页面,以便在页面的主要内容(边栏/部分)之间始终有一个 固定边距/ space ) 和页脚 (例如 120px)应该跨浏览器工作。
此外,如果页面上的内容很少,页脚应始终至少出现在(可见)屏幕的底部。
我通过应用 class footer
进行了多次尝试,包括以下内容,但总是忽略边距。
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>
有人可以帮我解决这个问题吗?
此外,如果关于我的 HTML 有任何更改,请也让我知道。
只需为正文添加样式,边距为 0px。
body{
margin: 0px;
}
为什么使用“:before”?
您的 css 应如下所示:
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
试试这个例子(对我来说效果很好)。 如果它不起作用 - 请确保使用 css 重置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav style="background:grey;height:100px;">
<!-- ... -->
</nav>
<section id="sidebar" style="background:green;height:100px;">
<!-- ... -->
</section>
<section id="main" style="background:red;height:100px;">
<!-- ... -->
</section>
<footer class="footer" style="background:blue;">
<div>Some text</div>
</footer>
</body>
</html>
<style>
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
</style>
要在正文和页脚之间添加边距,只需将其添加到页脚部分的样式中:
padding:20px 0px 0px 0px;
将页脚保持在底部比较复杂。为 css:
尝试这样的事情html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{ /*create a div around whole html body
min-height:100%;
position:relative;
}
#main{
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
color: #333;
}
这应该有帮助:
html, body {
height: 100%;
}
body {
margin:0px;
padding: 0px;
}
.wrap {
height: auto;
margin: 0 auto -80px; /* footer height + space */
min-height: 100%;
padding: 0 0 80px; /* footer height + space */
box-sizing: border-box;
overflow: auto;
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}
<body>
<div class="wrap">
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
</div>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
我知道我来晚了一点,但你也可以用 vh
的一些固定单位来猜测。 Hacky,但它在紧要关头有效。
.wrap {
min-height: 70vh;
}
<div class="wrap">
<section id="chapterone">
<p>Lorem ipsum...</p>
...
</div>
<footer class="footer">
<a href="/">Home</a>
...
</footer>
已解决!
在我的例子中,我将前面的div(如“正文”)的id添加到页脚div上方的div,如下:
<div id="body" class="container">
...
</div>
<div class="row footer-row-bg">
...
</div>
然后,在我的 CSS 文件中,我为该 ID 添加了 padding-bottom:20px;
,如下所示:
#body{
padding-bottom:20px;
}