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(){ ... });

次に、.css({...}) 関数のように jquery を使用して割り当てを行います。

また、条件文が

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 に答える