总是在底部页脚不起作用

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 规则是正确的。

以下是您需要了解的有关相对文件路径的所有信息：

• 以“/”开头返回根目录并从那里开始
• 以“../”开头的目录向后移动一个目录并从那里开始
• 以“../../”开头将两个目录向后移动并从那里开始（依此类推...）
• 要继续前进，只需从第一个子目录开始并继续前进

-Source and more information

假设您的文件在同一个文件夹中，请尝试改用这个：

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

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

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

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