Изменение размеров разделов и кнопок для разных размеров окна

Я пытаюсь найти размер окна на стороне клиента, чтобы я мог изменить размер своих divs и кнопок соответственно в файле .jsp на стороне сервера.Изменение размеров разделов и кнопок для разных размеров окна

вещи работают точно, как я хотел бы в stickyFooter: Fiddle

Но когда я иду, чтобы поместить этот код в моем .jsp файл в затмении, есть ошибка, как выход в stickyFooter и моя веб-страница не тоже самое.

Я делаю что-то принципиально неправильное или может быть ошибка в моем синтаксисе (ниже)?

Вот мой код в моем .jsp файле:

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

<script> 
$(function()){ 
function positionScreen() { 
    var winHeight = $(window).height(); 
    var winWidth = $(window).width(); 
    var heightContent = winHeight; 
    var widthContent = winWidth/2; 
    var buttonWidth = winWidth/4; 
    var buttonHeight= winWidth/10; 


    $("#leftContent").height(heightContent); 
    $("#leftContent").width(widthContent);   
    $("#rightContent").height(heightContent);   
    $("#rightContent").width(widthContent); 
    $(".clickedbutton").width(buttonWidth); 
    $(".clickedbutton").height(buttonHeight); 

} 
$(window).resize(positionScreen); 
positionScreen(); 
}); 
</script> 


<style type="text/css"> 

div { 
margin:0px; 
padding:0px;  
} 

#leftContent { 
min-height:50px; 
background:#d0d020; 
position: absolute; 
left: 0%; 
top: 10%; 
} 

#rightConent { 
min-height:50px; 
background:#ff90d0; 
position: absolute; 
left: 50%; 
top:10%; 
} 

.clickedbutton {color:blue; 
       background-color: yellow; 
       font-size: 150%; 
       font-family: Arial Black; 
       position: relative; 
       left: 25%; 
} 

.button {color:blue; 
     font-size: 150%; 
     font-family: Arial Black; 
     position: relative; 
     left: 25%; 
} 

<div id = "leftContent"> 
<button id="TV1" name= "TV1" class="clickedbutton"> 
<button id="TV1" name= "TV1" class="clickedbutton"> 
<button id="TV1" name= "TV1" class="clickedbutton"> 
<button id="TV1" name= "TV1" class="clickedbutton"> 
</div> 

<div id = "rightContent">  
<button id="TV1" name= "TV1" class="clickedbutton"> 
<button id="TV2" name= "TV2" class="clickedbutton"> 
<button id="TV3" name= "TV2" class="clickedbutton"> 
<button id="TV3" name= "TV2" class="clickedbutton">   
</div>

источник

2014-02-06 gecko25

Я думаю, что вы можете достичь того же с помощью CSS, установив ширину с помощью% – Huangism

попробуйте изменить сценарий тег '

Попробуйте это: http://jsfiddle.net/jAE4e/13/

Единственное, что вы не можете достичь с помощью CSS IMHO, чтобы определить высоту кнопок на основе ширины окна (если вы даже сделали это намеренно).

div { 
    margin:0px; 
    padding:0px;  
} 

#leftContent { 
    position: absolute; 
    background:#d0d020; 
    bottom: 0; 
    left: 0; 
    width: 50%; 
    height: 80%; 
} 

#rightContent { 
    position: absolute; 
    width: 50%; 
    height: 80%; 
    background:#ff90d0; 
    bottom: 0; 
    right: 0; 
    width: 50%; 
} 

.clickedbutton { 
    color:#ff90d0; 
    background-color: yellow; 
    font-size: 150%; 
    font-family: Arial Black; 
    display: block; 
    text-align: center; 
    width: 25%; 
    height: 10%; 
    margin-left: auto; 
    margin-right: auto; 
}

источник

2014-02-06 20:37:52 cschuff

Смежные вопросы