Question

我正在尝试查找客户端窗口的大小，以便我可以在服务器端.jsp文件中相应地调整div和按钮的大小。

在stickyFooter：Fiddle

中，我的工作方式正是如此

但是当我把这段代码放在eclipse中的.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>

Answer 1

我注意到您没有每个按钮的结束</button>标记。即使JSFiddle正在运行，浏览器也会为不完整的HTML更新DOM。这可能是您问题的一部分。我不熟悉Eclipse，但你可以从那里开始。我发表评论，但我还没有足够的代表。

Answer 2

试试这个：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;
}

调整不同窗口大小的div和按钮的大小

2 个答案: