總是在底部頁腳不工作

我做了一個總是在底部頁腳與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; 
}

當我打電話的頁面與「文件，它工作正常：/// C：/ XAMPP/htdocs中/文件夾/ index.html「，但是當我用」http://localhost/folder/index.html「調用它時，它不會。我希望有人能幫助我，因爲我真的感到沮喪。

來源

2016-12-20 Edward Kenway

你能分享codepen嗎？ – Jase

你可能還沒有使用你的CSS的相對文件路徑。 – Faegy

在瀏覽器中打開index.html文件後，點擊右鍵，選擇查看源代碼。在查看源代碼時，請檢查與index.html鏈接的css文件是否正確。 –

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

你應該能夠很容易地創建你自己的相對路徑。

來源

2016-12-20 18:59:54 Faegy

不知道爲什麼，但它現在有效。我剛剛解決了另一個問題。感謝您的快速響應。 –

編程邏輯hahaha – Faegy

總是在底部頁腳不工作

回答

相關問題