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

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

始终在底部页脚不起作用

1 个答案: