2014-11-03 133 views
0

我一直在撞牆,試圖弄清楚這一點; http://nicklemmon.com/lily內容容器沒有調整大小以適合內容

由於某些原因,.content div的高度不會適應其內容!我可以使內容的高度大於100%,但是這樣做會破壞流暢佈局的目的。這只是一個隨機的網站,我正在努力學習更多關於CSS動畫的知識,但我已經跑到了這個愚蠢的障礙。

幫助!

+1

這是因爲你有100vh – cport1 2014-11-03 21:26:57

+0

IMG不EVER關閉標籤。 img類應該是img-responsive img-circle應該刪除內聯樣式。這個問題的標籤應該是twitter-bootstrap-3 NOT bootstrap(這是完全不同的東西)。保持高度獨立,不要與它相混淆(我看你固定它)。 – Christina 2014-11-03 21:36:33

+0

打開你的主站點和Firefox中的示例,紅色的東西應該被修復。或者在Chrome中使用開發者工具。 – Christina 2014-11-03 21:42:28

回答

1

你有100vhheight,刪除它,你應該罰款。

更新(使左側立柱高度等於右側立柱高度)

由於它的出現,似乎是用純CSS來調整左欄相同的高度右列中沒有直接的方法,你可以做一個變通方法在許多不同的方式中,我建議的最好方法是使用Javascript/jQuery

//HTML 
<div class="moving-right big-lefty col-md-3"> 

</div> 
<div class="big-righty col-md-9"> 

</div> 

//jQuery to use on document ready. 
$(".big-lefty").height($(".big-righty").height()); 

你可能想嘗試另一種解決方案CSS時,我試圖在鉻,使用檢查未工作你的情況。你可能想要玩它。

.contentdisplay:table-row.big-leftybig-rightydisplay:table-cell

+0

嗯,這似乎工作。我如何讓左列高度匹配.content的高度? – nlemmon 2014-11-03 21:31:03

+0

使用一些東西來平衡高度以匹配高度。我使用jQuery,但其他人做各種各樣的東西。在你的情況下,尋找填充底部負邊距方法,因爲它應該工作。閱讀我在OP – Christina 2014-11-03 21:35:40

+0

的評論更新了我的答案,讓我知道如果這有效。 – Phani 2014-11-03 21:47:12

0

overflow:auto應該爲你做的伎倆。

.content{ 
    overflow:auto; 
}