css - 浮动 div 正在扩展容器的高度，但如果我将百分比高度应用于内部 div 元素，则高度未定义

Question

我有一个容器 div 它包含多个浮动 div 我希望容器内的特定边框 div 具有容器本身的 90% 高度但是它似乎没有检测到容器的高度，即使我已经应用 clear:both在容器的末尾，也溢出：隐藏到容器 div。

Answer 1

您可以使用此js脚本：

<script type="text/javascript">
    $(document).ready(function() {
        setHeight();
        $(window).resize(function() {
           $('.seperator2').css({ height: '50px'});
           setTimeout(function(){
              setHeight();
            },300);        
        });
   });
  function setHeight(){
     var contentH = $('.content').height();
     separatorH = parseFloat(contentH * 0.9);
     $('.seperator2').css({ height: separatorH });
  }
</script>

该脚本可以位于页面的头部或底部。尽管有这个地方，但请确保首先链接jQuery库。

注意：要在头部（或页面的其他地方）链接jQuery库，请使用以下脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

编辑：您可以将height元素的设置为 0 或完全删除它。我仍然可能会将其保留为height: 100;; 在执行脚本之前，这将强制页面看起来不错。