Question

[！[在此处输入图片说明] [1]] [1]您好我正在设置一个网页。我使用javascript代码将屏幕宽度设置为屏幕宽度，如下所示

window.onload=getSize;

function getSize()
{
    var x=window.screen.availWidth;
    var y=window.screen.availHeight;

    document.getElementById("header").style.width=(x-50)+'px';
    document.getElementById("header").style.height=(0.2*y)+'px';
    document.getElementById("wrapper").style.width=(x-50)+'px';
    document.getElementById("wrapper").style.height=(0.6*y)+'px';

}

现在发生了什么，当我将子div添加到父div（标题）时，标题的宽度显着增加但我希望它根据显示大小保持固定

这是css文件

@CHARSET "ISO-8859-1";

#header {
    margin: auto; 
    position : relative;
    background-color: #009acd;


}

#logo1 {
    position: absolute;
    top: 5%;
    left: 0.4%;
}

#caption {
    position: absolute;
    top: 50%;
    left: 30%;
    color: #FFFFFF;
}
#marquee{
    position: absolute;
    top: -15px;
    color: #FFFFFF;
    left: 300px;

    }
#info{
    position: absolute;
    top: 60px;
    left: 1075px;
    color: #FFFFFF;
    }
h3{
    position: absolute;
    top: 90px;
    left: 1000px;
    color: #FFFFFF;
    }
#menu{
    position: absolute;
    bottom: 0%;
    left: 0.215%;
    }
#wrapper{
position: relative;
background-color: #FFFFFF;

}
#videos{
    position: absolute;
    top:0px;
    left: 22px;
}
#studymaterial1{
    position: absolute;
    top:148px;
    left: 32px;
}
#downloads{
    position: absolute;
    top: 315px;
    left: 22px;
}
#wowslider-container1{
    left: 233px;
    top: 10px;

}
.formoid-solid-blue{
    position: absolute;
    left: 912px;
    top:    12px;

}

HTML

<!DOCTYPE html>
<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Answer 1

在分配px / %属性时，您缺少单元（width / height）。

试试这个：

document.getElementById("header").style.width=(x-50)+'px';
____________________________________________________^^^^^^

Answer 2

您正在检查

window.screen.availWidth

这是一个常量，等于计算机屏幕的宽度。例如＆＃39; 1366px＆＃39;

相反，你必须使用

window.innerWidth

在页面加载时为您提供浏览器窗口的宽度。

var x=window.innerWidth;
var y=window.innerHeight;

希望这会有所帮助。 :)

CSS：将div添加到它时div宽度增加

2 个答案: