0

我希望一个 div59%在有内容时总是有高度，而在空白时消失。

更多解释在这张照片： 示例图片

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

2 回答 2

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 后被调用一次——所以只要你页面上的内容没有改变，一切都应该正常运行

请享用

于 2013-05-20T01:29:47.383 回答
0

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

于 2013-05-20T01:34:15.693 回答