溢出視口

任何人都可以解釋我如何下面的小提琴是overflowing the viewport。溢出視口

.row > .sidebar-fixed{ 
    position: absolute; 
    top: 60px; 
    width: 220px; 
    height: 100%; 
    overflow-y:scroll; 
} 
.row > .sidebar-fixed.left{ 
    left:0; 
} 
.row > .sidebar-fixed.right{ 
    right:0; 
} 

.fixed-fixed { 
    margin: 0 240px; 
}

http://www.bootply.com/X0Bie7aRN0

指定或硬編碼一些top value時，將height not be 100%和bottom be 0

.row > .sidebar-fixed{ 
     position: absolute; 
     top: 60px; 
     width: 220px; 
     height: 100%; // should replaced by bottom: 0; 
     overflow-y:scroll; 
    }

來源

2014-07-09 Shane

高度的百分比值爲什麼是相對於元素的containing block。

提供您的絕對定位的元素沒有任何定位的祖先（具有比position不同static），其包含塊將是initial containing block，在這種情況下100%高度計算的視口的高度。

當您定義了height屬性而沒有bottom屬性時，top屬性將簡單地偏移該元素的位置，但不會更改其定義的高度。

bottom:0將元素的邊距框的底邊與包含塊的填充框的底邊對齊。（ref,demo）

並演示初始包含塊，高度和定位行爲，請參閱this demo。

來源

2014-07-09 09:54:13

優秀的例子...當我刪除高度：100％，並將其替換爲底部：0 ...我沒有看到右側的滾動條了。 http://www.bootply.com/tzJNs9jXU1由於高度而來的整體滾動條。 – Shane

什麼是如此令人驚訝？ height: 100%表示如果指定了父高度，則將元素高度設置爲其父項的100％。然後，您將其位置設置爲從頂部60px，但它根本不會更改元素高度。所以它的下邊緣在視口下方60px是很自然的。

對於bottom: 0，當您指定top屬性 - 元素的頂邊相對於其父頂邊的指定高度位於position: relative|absolute處。當您指定bottom屬性時，元素的底邊將放置在其父項的指定高度處，其中position: absolute|relative。一次指定這兩個屬性會導致元素拉伸。這實際上是指定元素高度的一種常見方式。

來源

2014-07-09 09:56:50 Eternal1

「如果指定了父級高度。」 - 絕對定位的元素沒有這種限制。 –

其實他們這樣做，但對於這些元素，「父母」有點不同。 – Eternal1

我應該刪除高度：100％，並替換底部：0或我應該保持頂部，高度和底部。 – Shane

回答

相關問題