添加DIV另一個DIV中示出的滾動條

我有以下代碼：添加DIV另一個DIV中示出的滾動條

<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00"> 
    <div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div> 
</div>

截圖：

enter image description here

爲什麼div被觀察區域的外側，因此示出了推滾動條。如果您向右上角查看，當紅色div移動時，黑色區域是擴展名。

如何編輯它以便紅色div具有頂部和左側位置，但不會超出頁面寬度和高度？

來源

2014-02-27 Si8

檢查了一下，它發生在你身上，因爲溢出默認設置爲可見：http://www.w3schools.com/cssref/pr_pos_overflow.asp – arocketman

隱藏溢出並不能解決真正的問題。你給它一個相對於父容器的位置，但它仍然有100％的高度/寬度，所以它會超出父容器的邊界。代替相對定位，您可以使用填充或邊距來實現所需的位置，而不會產生溢出。 – Goose

我使用PIXEL作爲第二個DIV的左側和頂部而不是百分比。我該如何處理？ – Si8

要真正回答「爲什麼」的問題：

你得到滾動條的原因是絕對的內部的相對定位的div設置爲100％的寬度和高度，也是流離失所（在這種情況下，頂部和左側）

因此，假設父容器的寬度/高度爲100％並取代它，導致它太大。

通過添加overflow:hidden，您似乎可以解決此問題，但過去的任何內容都會被裁剪，而實際上並不適合您設置的尺寸。

另一種方式來做到這一點會是這樣的......

top: 10%; 
left: 10%; 
width:90%; 
height:90%;

你可以很容易地替換頂部和左側爲方向的填充/保證金。

來源

2014-02-27 18:41:24

如何避免使用'overflow：hidden'，以便文本和/或擴展到頁面寬度和高度以外的任何內容顯示滾動條，否則它不會顯示？ – Si8

查看更新的答案。這完全是爲了讓它適合。不幸的是，你不能使用像素**和**百分比而不使用JavaScript，因爲沒有辦法知道100％會實際轉化爲使用CSS。 –

想知道!!! ....我想這將是一個猜測，因爲我使用像素來定位其他地方：/ – Si8

您可以使用CSS3的calc（）函數將第二個div的高度和寬度設置爲與第一個div的高度和寬度相同，減去左側和頂部偏移量。這也將讓你在你的文本中使用position: absolute，它對準的權利：

<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00"> 
    <div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;"> 
     <span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span> 
    </div> 
</div>

檢查工作JSFiddle。我還添加了CSS reset以擺脫瀏覽器可能添加的邊距。如果要在HTML文件中使用此重置，請在<head>標記內創建一個<style>標記，並在JSFiddle的CSS部分中顯示代碼。如果您不想使用整個重置，則唯一實際相關部分是body { margin: 0px; }，因此您還可以將style="margin: 0px;"添加到您的body標記。

來源

2014-02-27 18:36:47 Filly

哇...作品！！！在第二個div裏面加上：'測試這個輸出'''''''''''頂部工作正常。 – Si8

這隻會隱藏問題 - 你的紅色'div'仍然溢出......當你添加到達底部的內容時，你會再次出現問題。 – technophobia

這就是我想要避免的。我怎樣才能設置它，讓紅色只進入右邊和底部的邊緣？ – Si8

添加DIV另一個DIV中示出的滾動條

回答

相關問題