setting the width of a `div` to window.innerWidth results in vertical slider
Question
I am trying to create a div boundary that fits snugly inside the entire window (also in JSFiddle ):
<!doctype html>
<html>
<head>
<script type='text/javascript'>
function setupDiv() {
document.getElementById('div')
.setAttribute('style'
, 'position: absolute; top: 30px; left: 0px; width: '
+window.innerWidth +'px; height: '
+window.innerHeight+'px; border: 1px solid #ff0000');
}
window.onload = setupDiv;
</script>
</head>
<body>
<div id='div'>
</div>
</body>
</html>
Unfortunately the above code results in both horizontal and vertical sliders and only the "north" and "west" border lines are visible. While I can of course reduce the values manually I would like to understand why is that.
3 answers
solution1
1 ACCPTED 2016-01-12 18:24:09
You can fix that in CSS using box-sizing and setting top to 0px (or adjusting for any non-zero value):
This will make the padding, border and margin factor in to the calculation of the width. As they are, margin, borders and width are not calculated as part of the width:
<!doctype html> <html> <head> <script type='text/javascript'> function setupDiv() { document.getElementById('div') .setAttribute('style' , 'position: absolute; top: 0px; left: 0px; width: ' +window.innerWidth +'px; height: ' +window.innerHeight+'px; border: 1px solid #ff0000'); } window.onload = setupDiv; </script> <style> #div { box-sizing: border-box; } </style> </head> <body> <div id='div'> </div> </body> </html>
solution2
0 2016-01-12 18:18:58
Solution to your problem (see alternative below)
The problem is your border, is adds to your width, so you have to remove the total border-width from the window.innerWidth , so 1px border means total 2 pixels (one on each side)
Example
<!doctype html> <html> <head> <script type='text/javascript'> function setupDiv() { document.getElementById('div') .setAttribute('style' , 'position: absolute; top: 0px; left: 0px; width: ' + (window.innerWidth - 2) +'px; height: ' + (window.innerHeight - 2) +'px; border: 1px solid #ff0000'); // Remove 2 px to compensate for the border } window.onload = setupDiv; </script> </head> <body> <div id='div'> </div> </body> </html>
Alternative suggestion
One question though, why not just use width: 100% ? Javascript is overkill for this.
Example
<!doctype html> <html> <head> <style> #div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 1px solid #ff0000; box-sizing: border-box; } </style> </head> <body> <div id='div'> </div> </body> </html>
solution3
0 2016-01-12 18:31:36
Use box-sizing for the border issue and subtract 30px to window.innerHeight to avoid scrolling
For your markup, use this styles:
* {
border: 0
padding: 0;
margin: 0;
box-sizing: border-box;
}
#div {
position: absolute;
top: 30px;
width: 100%;
height: 100%;
border: 1px solid red;
}
and this JS:
var div = document.getElementById('div');
div.style.height = (window.innerHeight - 30) + "px";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.