Question

我希望div在内容时始终具有高度59%，在空白时消失。

此照片中的更多解释： Example picture

我使用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>

Answer 1

我注意到了一些问题...首先应该在文档完成加载后调用你的javascript - 为此你想把它放在一个

中

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

第二，我会使用jquery进行类似.css（{...}）函数的赋值。

也绝对值得一提的是条件陈述

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%');
         }
    });

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

享受

Answer 2

请注意，CSS高度百分比是相对于父元素的高度计算的。如果父元素（和所有父元素）没有声明显式高度，则无需计算任何内容，高度百分比也不起作用。

如果空白与否，Javascript会更改div的大小

2 个答案: