css頁腳問題

我遇到了網頁問題。css頁腳問題

我使用min-height屬性將頁腳放置在頁面底部（如果內容不夠長）和內容之後（如果內容比窗口長）。有很多描述這種方法的教程，我也是這樣做的。

html, body { height: 100%; } 
.container { 
    min-height: 100%; 
    position: relative; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
}

和其他一些代碼。它工作得很好。

當我創建兩個額外的div將陰影添加到容器div時，會發生此問題。我有：

<div class="left-shadow"> 
    <div class="right-shadow"> 
     <div class="container"> 
     ... 
     </div> 
    </div> 
<div>

我想通html和車身高度保持100％，左陰影格爲100％，最小高度，並用鼠標右鍵陰影和容器有100％的高度（我假設100％將意味着父元素高度的100％）。但是，它不起作用（在Firefox中，它在Chrome中起作用，我並不在乎IE），並且我嘗試了各種組合以使其正確，但無濟於事。任何幫助，將不勝感激。

編輯：（部分代碼）

<html> 
    <head> 
    ... 
    </head> 
    <body> 
     <div class="left-shadow"> 
      <div class="right-shadow"> 
       <div class="container"> 

        <div class="header"> 
         header content 
        </div> 

        <div class="content" > 
         content goes here 
        </div> 


        <div class="footer"> 
         footer content here 
        </div> 


       </div> <!-- end container div --> 
      </div> 
     </div> 
    </body> 
</html>

和相關的CSS：

html { 
    overflow-y: scroll; 
    height: 100%; 
} 

body { 
    margin: 0 0 0 0; 
    height:100%; 
} 

.left-shadow 
{ 
    width: 1084px; 
    background: url("images/left-shadow.png") repeat-y left; 
    /* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */ 
    margin: auto; 
    min-height: 100%; 
} 

.right-shadow 
{ 
    width: inherit; 
    background: url("images/right-shadow.png") repeat-y right; 
    margin: auto; 
    height: 100%; 
} 


.container { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0; 
    width: 1024px; 
    height: 100%; 
}

編輯2：所以，我才發現，這個問題是屬於在DOCTYPE。所以從現在開始，我會在正確的地方提問。但是，既然這已經到了，我就會要求人們反應，而不必進入應該發佈問題的地方。謝謝。

來源

2010-01-20 ladaghini

任何機會看到你的陰影代碼？我的猜測是，他們被放置在絕對的位置，因此容器根據這些元素放置。此外，您可能需要爲陰影定義最小高度/高度，因爲它不會被繼承。 – David 2010-01-20 21:42:13

首先，使用CSS創建陰影效果。如果CSS解決方案不是你正在尋找的，那麼也許嘗試將一個陰影設置爲.container的背景圖像。現在你的標記被不必要的元素超載了。

但如果額外加價，就是去做你想要做什麼的唯一方式，然後再嘗試這樣的事：

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, .shadow, #container { 
    min-height: 100%; 
} 

#container { 
    position: relative; 
} 

#content { 
    padding-bottom: 55px; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px; 

    background: #0a0; 
}

和HTML標記（這些陰影的div使它看起來可怕的）：

<body> 
    <div id="shadow-left" class="shadow"> 
     <div id="shadow-right" class="shadow"> 
      <div id="container"> 
       <div id="content"> 
        Page contents 
       </div> 
       <div id="footer"> 
        Footer 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2010-01-20 21:53:44 Crozin

我真的推薦使用這個簡單的解決方案來代替「粘腳」。剛剛擺脫的問題：http://ryanfait.com/sticky-footer/

它只需要你能夠爲你的頁腳定義一個固定的高度，這在幾乎所有情況下都不成問題。

適用於所有常見瀏覽器！

來源

2010-01-20 23:05:37 Tom

css頁腳問題

回答

相關問題