Javascript更改div的大小（如果为空）

我想要一个div在有内容时总是有高度

59%

，在空白时消失

在这张照片中有更多的解释：

我使用javascript来做，尝试了很多方法，但什么都没有发生。 这是我的密码：

<%--Html--%>

    <div id="main">
            <div id="content1">
             </div>
            <div id="down"> 
            </div>
        </div>

<%--CSS: in css file--%>
    #main
    {width:84%;height:78%;position:absolute;left:8%; top:14%; }
    #content1
    {width: 100%;height: 59%;overflow: auto;}
    #down
    {margin-top:0.5%;width: 100%;height: 40%;}

<script type="text/javascript">
    if ($("#content1").length < 1) {
                    $("#content1").height = 0%;
                    $("#down").height = 100%;
                    }
    else {   
    $("#content1").height = 59%;
        $("#down").height =40%;
    }
</script>

#主要
{宽度：84%；高度：78%；位置：绝对；左侧：8%；顶部：14%；}
#内容1
{宽度：100%；高度：59%；溢出：自动；}
#向下
{页边顶部：0.5%；宽度：100%；高度：40%；}
如果（$（“#内容1”）。长度<1）{
$（“#内容1”）。高度=0%；
$（“向下”）。高度=100%；
}
否则{
$（“内容1”）。高度=59%；
$（“向下”）。高度=40%；
}

我注意到了一些问题。。。首先，应该在文档完成加载后调用javascript—为此，您希望将其放置在

$(document).ready(function(){ ... });

第二，我将使用jquery像.css（{…}）函数一样进行赋值

同样值得一提的是，条件语句

if ($("#content1").length < 1) 

if（$（“#content1”）.length<1）

正在检查“#content1”包含的元素数，如果要检查该元素中html字符串的长度，请使用.html（）

把一切放在一起，这就是最终的结果

    $(document).ready(function(){
         if ($("#content1").length < 1) {
              $("#content1").css('height', '0%');
              $("#down").css('height', '100%');
         }
         else {   
              $("#content1").css('height', '59%');
              $("#down").css('height', '40%');
         }
    });

$（文档）.ready（函数（）{
如果（$（“#内容1”）。长度<1）{
$（“#content1”）.css（'height'，'0%”）；
$（“向下”）.css（'height'，'100%）；
}
否则{
$（“#content1”）.css（'height'，'59%）；
$（“向下”）.css（'height'，'40%）；
}
});

以这种方式使用jquery的css函数将用设置的样式覆盖现有样式。现在这个脚本只会在第一次加载DOM后被调用一次，所以只要页面上的内容没有改变，一切都应该正常运行

---

享受

注意CSS高度百分比是相对于父元素的高度计算的。 如果父元素（以及所有父元素）没有声明显式的高度，则无需计算，且高度百分比不起作用