DIV重疊粘頁腳

我有一個包含另外三個的div一個div：標題，內容，頁腳DIV重疊粘頁腳

<div class="note"> 
    <div class="header">Title</div> 
    <div class="content" contenteditable="true">Some content</div> 
    <div class="footer">Footer</div> 
    </div>

頁腳是總是在父div的底部。這裏是一些CSS：

.note { 
    position: relative; 
    width: 40%; 
    height: 200px; 
    overflow: hidden; 
    padding: 6px; 
    margin-top: 10px; 
} 
.note .footer { 
    position: absolute; 
    bottom: 0px; 
} 
.note .content { 
    overflow: hidden; 
}

中間div用於文本輸入。問題在於，如果文本太多，它會重疊頁腳。我希望中間div是一個可滾動區域，它不會重疊頁腳。它可以通過設置該div的高度來完成，但這對我並不好 - 具有類「note」的div將可調整大小。我該怎麼做？

這裏工作plunker：http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview

來源

2014-06-09 user1091733

將'overflow：scroll'添加到您的.note .content – Kiee

但它仍然重疊頁腳 – user1091733

首先第一件事情：

卸下頁腳中的絕對定位。

position: absolute;

這需要頁腳在文檔正常流程的「外部」。因此，如果您的內容增加，頁腳將始終顯示爲與內容「重疊」。

相反，使用相對定位頁腳：

.content { 
    background-color:Orange; 
    height:400px; 
    overflow: hidden; 
} 

.footer { 
    position: relative; 
    bottom: 0px; 
    background-color:Black; 
    color:White; 

}

在上面的代碼，你可以改變內容的高度，你會發現，頁腳始終保持在頁面的底部，不論內容的「大小」。

您還需要爲內容div添加最小高度，以使頁腳始終位於屏幕底部。只是想我會讓你知道的！

看到這個這裏 - >http://jsfiddle.net/9dUJY/

希望這有助於！

來源

2014-06-09 20:15:09

我不能在'.content'上擁有絕對高度。這是做到這一點的唯一方法嗎？ – user1091733

您可以擁有任何內容高度。不管內容的密度如何，頁腳div始終停留在內容的底部。無論內容是2px還是100px頁腳，都會始終保持在其下方。多數民衆贊成在我想要指出的小提琴:) –

嘗試更改高度的值2px和1000px在小提琴中，你「觀察腳註自動調整，始終保持正確的內容下方。 –

你的CSS更改爲以下：

.note { 
    position: relative; 
    width: 40%; 
    height: 100px; 
    padding: 6px; 
    margin-top: 10px; 
    border-style: solid; 
} 
.note .footer { 
    position: absolute; 
    bottom: 0px; 
    background-color:#fff; 
    /* width:100%; */ 
} 
.note .content { 
    overflow-y: scroll; 
    overflow-x:hidden; 
    height:60%; 
}

來源

2014-06-09 20:09:12

太棒了！像魅力一樣工作。 'width：100％;'.note中的footfoot真的很必要嗎？ – user1091733

不，這只是我做的第一件事，以確保您看不到頁腳中的內容。真正的問題是將設置設置爲overflow-x和overflow-y，然後將高度設置爲無論你想限制它。 –

經過一番測試後發現這不是完美的解決方案。內容div的百分比高度會使它在不同高度的音符上與頁腳有不同的距離。例如，對於高度爲500px的div'note'，內容和footer之間的差距比div'note'之間的差距高200px – user1091733

是否音符的高度需要在100px的設置？您可以爲頁腳設置高度，然後將.note中的填充底部與頁腳高度相等以避免重疊。我用30px作爲例子，並刪除了固定的高度。 Try it here。

來源

2014-06-09 20:11:17 tsHunter

我不希望音符展開，它應該始終保持相同的高度。 – user1091733

您的內容沒有設置高度，並且沒有激活滾動。您將滾動條添加到100像素高的容器中，這一事實讓我覺得您稍後會遇到可用性問題。

updated version

注意支持的瀏覽器，如果你是一個現代化的情況下工作只有你會好起來的。它似乎支持IE8。

Check the MDN Docs

.note { 
    position: relative; 
    width: 40%; 
    height: 100px; 
    padding: 6px; 
    overflow: hidden; 
    margin-top: 10px; 
    border-style: solid; 
} 
.note .footer { 
    bottom: 0px; 
} 
.note .content { 
    overflow-y: scroll; 
    overflow-x:hidden; 
    height:70px; 
}

來源

2014-06-09 20:15:01

DIV重疊粘頁腳

回答

相關問題