Question

我是CSS的新手，我正在尝试设置页面，以便在页面的主要内容（侧边栏/部分）和页脚之间始终存在固定边距/空格（例如120px）哪个应该跨浏览器工作。
此外，如果页面上的内容非常少，页脚应始终至少显示在（可见）屏幕的底部。

我通过应用课程"footer"进行了多次尝试，包括。以下内容，但保证金始终被忽略。

我的HTML结构（简化）：

<!DOCTYPE html> <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>

我的CSS：

.footer { color: #333; font-size: 11px; text-align: center; vertical-align: bottom } .footer:before { clear: both; display: block; height: 120px; min-height: 120px; }

有人可以帮我这个吗？此外，如果有任何关于我的HTML的更改，请告诉我。

非常感谢，麦克

Answer 1

这应该有所帮助：

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>

Answer 2

为什么你使用＆＃34;：之前＆＃34;？

你的CSS应该是这样的：

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

试试这个例子（对我来说很好）。如果不起作用 - 请确保使用css reset。

<!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>

Answer 3

要在正文和页脚之间添加边距，只需将其添加到页脚部分的样式： 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;
}

Answer 4

只需将样式赋予身体，边距为0px。

  body{
      margin: 0px;
  }

Answer 5

我知道我参加聚会有点晚了，但是您也可以用vh的一些固定单位来估算。哈克，但在紧要关头。

.wrap {
    min-height: 70vh;
}

<div class="wrap">
    <section id="chapterone">
        <p>Lorem ipsum...</p>
    ...
</div>

<footer class="footer">
    <a href="/">Home</a>
    ...
</footer>

HTML / CSS：如何获得正文和页脚之间的固定边距

5 个答案: