使用jquery.css響應高度的div div

Question

你好傢伙這是我的第一個問題在這裏，它是關於如何使用jQuery使我的div響應高度。

這是我用過嘗試一下的funcion：

$(document).ready(function(){ 
$(".panel").css("height: $('window').height();"); }); 

但是當我保存，我嘗試運行我的網頁我看不到任何東西，因爲div的高度設置爲0我甚至不知道這是否是正確的方法...

請幫助我，並感謝所有。

Answer 1

如果你想jQuery的方式，你可以像下面：

$('.panel').css('height', $(window).height()); 
$(window).resize(function() {  
    $('.panel').css('height', $(window).height()); 
    }); 

檢查下面的代碼片段例如：

$(".panel").css("height", $(window).height()); 
 
$(window).resize(function() { 
 
    $(".panel").css("height", $(window).height()); 
 
});

body { 
 
    background-color: yellow; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.panel { 
 
    background-color: blue; 
 
    width: 100px; 
 
}

<div class="panel"> 
 
    This is the panel 
 
</div> 
 

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

你也可以做它與一行CSS，使用height:100vh;
檢查vh（視高度）的瀏覽器支持，Can I use vh

body { 
 
    background-color: yellow; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.panel { 
 
    background-color: blue; 
 
    height: 100vh; 
 
    width: 100px; 
 
}

<div class="panel"> 
 
    This is the panel 
 
</div>