我需要获取浏览器窗口的大小,并在JavaScript中将窗口大小设置为div大小。
如果窗口大小为568px,我有2个div元素,div1希望占38%,div2希望占62%。在每个大小上,两个div都希望保持相同的百分比大小。
我需要获取浏览器窗口的大小,并在JavaScript中将窗口大小设置为div大小。
如果窗口大小为568px,我有2个div元素,div1希望占38%,div2希望占62%。在每个大小上,两个div都希望保持相同的百分比大小。
var width = window.innerWidth;
var height = window.innerHeight;
更新:
如果屏幕的宽度等于或小于568px,您可以设置两个
if(width <= 568) {
document.getElementById('div_1').style.width = '38%';
document.getElementById('div_2').style.width = '62%';
}
或者你可以使用只基于CSS的解决方案,我认为在这种情况下建议使用更简单的方法,即利用媒体查询
:
.container{
width: 100%;
}
.div_element {
height: 100px;
width: 100%;
}
#div_1 {
width: 38%;
background: #adadad;
}
#div_2 {
width: 62%;
background: #F00;
}
@media(max-width: 568px) {
#div_1 {
width: 38%;
}
#div_2 {
width: 62%;
}
.div_element {
float: left;
}
}
<div class='container'>
<div id='div_1' class='div_element'>
div 1
</div>
<div id='div_2' class='div_element'>
div 2
</div>
</div>
使用以下代码获取浏览器窗口的高度和宽度:
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
body {
margin: 0px;
height: 100vh;
}
#div1 {
width: 38%;
height: 100%;
float: left;
background: red;
}
#div2 {
width: 62%;
height: 100%;
float: left;
background: yellow;
}
#divMain {
clear: both;
height:100%;
}
#divMain:after,
#divMain:before {
display: table;
content: '';
}
#divMain:after {
clear: both;
}
<div id="divMain">
<div id="div1">
</div>
<div id="div2"></div>
</div>