内容容器未调整大小以适合内容

Question

我一直在撞墙试图解决这个问题。 http://nicklemmon.com/lily

由于某种原因，.content div的高度不会调整以适应其内容！我可以使.content的高度大于100％，但这种方式会破坏流畅布局的目的。这只是一个随机网站，我正在努力了解更多关于CSS动画的信息，但我在路上遇到了这个愚蠢的障碍。

帮助！

Answer 1

overflow:auto应该为你做到这一点。

.content{
    overflow:auto;
}

Answer 2

你有height 100vh，删除它，你应该没事。

更新（使左列高度等于右列高度）

看起来似乎没有简单的方法可以使用纯CSS将左列调整到与右列相同的高度，您可以通过多种不同的方式进行解决，我建议的最佳方法是使用{{ 1}}。

Javascript/jQuery

你可能想尝试另一种CSS解决方案，当我在chrome上使用inspector尝试它时，这种解决方案在你的情况下不起作用。你可能想玩它。

//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()); 为.content，display:table-row和.big-lefty为big-righty