未將CSS代碼應用於div？

所以我目前正試圖在頁腳的底部定位一個div，看起來我在使用CSS時遇到了這個重複出現的問題。每過一段時間，我都會遇到一個問題，無論我嘗試將哪個定位代碼應用於div/element，它都不起作用。我嘗試了多臺計算機，不同的程序等，以確定它是否有問題，但是我縮小了代碼，只是簡單的代碼，但我無法弄清楚它是什麼。未將CSS代碼應用於div？

這裏是CSS部分：

#footer{ 
    height:200px; 
    width:1600px; 
    border: 5px solid orange; 
    background-color:white; 
    position:absolute; 
    padding-top:800px; 

}

來源

2015-10-17 Sl0thzy

請縮小CSS的實際問題。甚至有幾個註釋掉的塊只是這個問題的噪音。另外，請添加應用了CSS的HTML。 – GolezTrol

檢查開發控制檯以查看是否正在重寫事件。 – csmckelvey

我想嘗試使用位置：絕對自指定位置 – melvnberd

從我可以做出來，你在在不同的屏幕尺寸或窗口的大小調整的底部定位頁腳發現難度。請參閱this MDN reference on positioning。

position可以是static,relative,absolute或fixed之一。添加定位（靜態，這是默認設置除外）會自動允許您訪問屬性的頂部，底部，左側，右側和z-index。

使用的定位類型決定了框的渲染。 static以文檔順序呈現元素，relative呈現爲靜態，但元素可以定位並在原始佈局中留下間隙（如果移位）。 absolute和fixed不會留下任何空白，並在計算文檔佈局的尺寸時跳過。

以下屬性對於您的CSS規則在獲取固定頁腳方面非常重要。

位置是：絕對的或固定的
左：0
底部：0

jsfiddle

footer{ 
 
    height:50px; 
 
    
 
    /*width:1600px;*/ 
 
    width:100%; /* Converted to fluid width */ 
 
    
 
    /*border: 5px solid orange;*/ 
 
    border-top: 5px solid orange; /* all around border triggers horizontal scrollbar. So use only top border*/ 
 
    
 
    background-color:white; 
 
    
 
    position:absolute; /*or fixed*/ 
 
    
 
    /*padding-top:800px;*/ /* padding only adds space inside the box. so remove*/ 
 
    
 
    bottom:0; /* position the footer at the absolute bottom of the page*/ 
 
    left:0; /*position the footer to the absolute left of the page*/ 
 
}

<div id="contentPage"> 
 
    <header> 
 
    <div>This is my header</div> 
 
    </header> 
 
    <section> 
 
    <div>Content section</div> 
 
    </section> 
 
    <footer> 
 
    <p>This is my footer</p> 
 
    </footer> 
 
</div>

來源

2015-10-17 00:40:29 santon

如果你想漂浮在頁面底部的頁腳股利，那麼你必須設置： position: fixed bottom: 0 並取出top財產

現在，如果您希望頁腳位於主體底部（在頁面末尾滾動），則不需要任何內容，因爲默認情況下DIV總是被命令爲一個低音。

我希望我幫你:)

來源

2015-10-17 00:09:55 Jistycs

我一種新的Web開發。但是你展示的CSS代碼對我來說看起來相當不錯。我想，也許你有同樣的問題，我過些天前：

這裏來的相關部分：

當您使用CSS #，它是定義與所標識一個div的屬性id在HTML中，並且如果您使用class標識您的div，則應在名稱前使用.。如果你使用它，否則它將無法正常工作。而對於預定義格類型（例如：頁腳，標題等，不需要令牌

使其SHORT：。

使用.令牌CSS通過class在HTML標識一個div

使用#令牌CSS通過id在HTML標識一個div。

對於預定義的div類型（頁眉，頁腳等），您不使用令牌。

例：

HTML：

<div class="box1">"bla bla bla"</div> 
<div id="box2">"more bla bla"</div> 
<h1>bla bla title</h1>

CSS：

.box1 {color: blue;} 
#box2 {color: red;} 
h1 {color:green;}

我希望，如果你的問題是與此相關的一些東西，這個答案可以幫助你。

來源

2015-10-17 00:50:27 Ffff

感謝您提供幫助！可悲的是，我確實已經設置了相關部分，因爲只有當我開始進入定位時，情況纔會停止。 – Sl0thzy

@ Sl0thzy。 :)有些東西告訴我，我可以幫你...（或者其他人也可以）。但**我們需要更多關於這個特定div的行爲的信息。它的位置是否錯誤？尺寸錯誤？它根本不顯示？有關包含它的div的一些信息，或許是**。儘可能地嘗試噓聲。這會幫助我們幫助你，我個人很樂意提供幫助。 – Ffff

對不起哈哈我以爲我已經覆蓋了它。它基本上不會對我試圖給予的立場作出反應，或者當它做到時，它不會按照要求做的事情做出反應。它只是應該在頁面底部作爲頁腳的一種圖片框架。 – Sl0thzy

未將CSS代碼應用於div？

回答

相關問題