Почему моя функция JQuery не меняет высоту моего текстового поля?

Question

Вот выдержки стилей для класса панели, которые я использую для редактирования текстовой области и «textarea».

.panel{ 
    float: left; 
    width: 50%; 
} 

textarea{ 
    resize: none; 
    border-top: none; 
    border-color: grey; 
} 

Ниже приведен фрагмент таблицы стилей «topbar», заголовок над текстовой областью.

#topbar{ 
    width: 100%; 
    background-color: #FFFFFF; 
    padding: 5px; 
    height: 20px; 
} 

Вот DIV, который содержит мое текстовое поле (The bodyContainer идентификатор не стиль)

<div id="bodyContainer"> 
    <textarea id="TextPanel" class="panel">Hello World</textarea> 
    <iframe id="outputPanel" class="panel"></iframe> 
</div> 

Ниже приведены расчеты Jquery, предназначенные для редактирования высоты текстового поля в.

$(".panel").height($(window).height() - $("#topbar").height() - 15); 
$(".panel").width($(window).width()/2 -10; 

Answer 1

Вы неправильно устанавливаете css. И я бы порекомендовал вам использовать переменные

как

var h= $(window).height() - $("#topbar").height() - 15; 
var w = $(window).width()/2 -10 ; 

$(".panel").css("height", h); 
$(".panel").css("width", w); 

Дайте, что вихрь