Javascript改變div的大小，如果空白或不空

我想要一個div總是有高度59%當它有內容，消失時，空白。Javascript改變div的大小，如果空白或不空

在這張照片的更多解釋： 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>

來源

2013-05-20 Frzzy

有幾個問題，我注意到...第一文檔加載完成後，你的JavaScript應該叫 - 要做到這一點，你需要將其放入內

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

第二我會使用jquery做與.css（{...}）函數一樣的任務。

也很肯定值得一提的是，條件語句

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

正在檢查的元素是「＃內容1」包含，如果你想在該元素檢查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-20 01:29:47 Joe

content.length是錯誤的....非常感謝你.. :) – Frzzy

注意，CSS高度百分比是相對於父元素的高度計算的。如果父元素（和所有的父母）沒有明確的高度聲明沒有什麼計算和高度的比例開不工作。

來源

2013-05-20 01:34:15 Maujor

Javascript改變div的大小，如果空白或不空

回答

相關問題