jqueryでCSSを使用してブラウザの高さにdivを伸ばしてください

jqueryでCSSを使用してdivをブラウザの高さに伸ばしようとしています。それは動作していないようです。私はdivに100％の幅を適用することができ、それは動作します。しかし、高さではありません。何らかの理由がありますか？ありがとう！jqueryでCSSを使用してブラウザの高さにdivを伸ばしてください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<script> 
 
\t 
 
$(function() { 
 
    $('.test').css({ 
 
     "background-color": "yellow", 
 
"width": "50%", 
 
"height": "50%", 
 
    }); 
 
\t 
 
}); 
 
</script> 
 

 
<div class="test" style="width: 15px; height: 60px; background-color: red"><div>

出典

2017-03-26 Ryan Hall

は、ブラウザのdimentionsを取得するために$(window).width()と$(window).height()を使用しています。

ので、同じように：

.test { 
    background-color: yellow; 
    width: 100vw; 
    height: 100vh; 
}

：あなたはprogrammicallyこれを実行する必要がない場合

$(document).ready(function() { 
    $('.test').css({ 
    "background-color": "yellow", 
    "width": $(window).width(), 
    "height": $(window).height(), 
    }); 
});

Click here for a working demo.

、私は非常に次のCSSソリューションを使用することをお勧めしますvwおよびvhはViewport WidthおよびViewport Heightを表します。

上記をCSSクラスに変更してから、jQueryを使用してjQueryのaddClass()関数を使用してそのクラスを単純に適用することもできます。 Here is another demo using that solution.

出典

2017-03-26 23:16:46 Fizzix

ありがとうFizzix！できます！私はJQueryでこれを行う必要があります。これは最高です！ありがとう！ –

使用100VH。ビューポートの高さを意味します。 100％がうまくいかない理由は、要素が特許の高さをとるためです。あなたのウィンドウ/ビューポートではありません。

ブロックされた要素の幅は自動的に100％になります。しかし、要素の高さではそうではありません。したがって、HTMLから要素までのすべてを100％に設定する必要があります。いずれか、またはあなたは100vhを使うべきです。

出典

2017-03-26 23:06:54

これは、bodyとhtmlがdivを囲んでおり、その高さに強制的に適用されるため、100％をbodyとhtmlに適用する必要があるからです。 100vhをビューポートの高さの100％に使用することもできます。

<html> 
<body> 
    <div class="test" style="width: 15px; height: 60px; background-color: red"> <div> 
</body> 
</html>

ます。また、ビューポート（100％）を意味ではなく、100％を100VH使用することができます

html,body { 
height:100%; 
min-height: 100%; 
}

CSS。

は、以下を参照してください。あなたはjQueryを使ってこれを行う必要がある場合https://snook.ca/archives/html_and_css/vm-vh-units

出典

2017-03-26 23:10:18 MartinWebb

jqueryでCSSを使用してブラウザの高さにdivを伸ばしてください

答えて

関連する問題