html - 始终在底部页脚不起作用

Question

我使用 codepen 中的这段代码制作了一个始终位于底部的页脚。

HTML

<div class="content">

    <header>
        <p>blabla</p>
    </header>

    <main>
        <p>blaBlabla blub</p>
    </main>
</div>

<footer> 
    <p>more bla</p>
</footer>

CSS

*{
    margin: 0; 
    padding: 0;
    border: 0;
}

html{
    height: 100%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    position: relative;
    margin: 0;
    padding-bottom: 250px;
    min-height: 100%;

    background-color: white;
}

.content {
    margin: 0 auto;
    width: 100%;
}

footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: black;
    color: white;
    text-align: center;
}

当我用“file:///C:/xampp/htdocs/folder/index.html”调用页面时它工作正常但是当我用“http://localhost/folder/index.html”调用它时它不工作。我希望有人能帮助我，因为我真的很沮丧。

Answer 1

您的 css 文件链接可能无法在服务器上解析，因为您的 css 规则是正确的。

Here is all you need to know about relative file paths:

• Starting with "/" returns to the root directory and starts there
• Starting with "../" moves one directory backwards and starts there
• Starting with "../../" moves two directories backwards and starts there (and so on...)
• To move forward, just start with the first subdirectory and keep moving forward

-Source and more information

假设您的文件在同一文件夹中，请尝试改用它:

<link rel="stylesheet" type="text/css" href="./yourStyleFileName.css">

例如，假设您的文件位于根 css 文件夹中，请尝试使用:

<link rel="stylesheet" type="text/css" href="/css/yourStyleFileName.css">

您应该能够很容易地创建自己的相对路径。