Get the actual width of an element?
Question
I have a footer with an an image located on the right side. Below is an abstract sample of said footer.
The problem is, whenever the page becomes too wide for the window and horizontal scrolling becomes active, my footer's width continues to stay dependent on the width of the body, instead of the actual width of the content.
<body>
<div id='bodyContent' style="height:600px; width:600px;">
<div style="width:200px; height: 400px; float:left; background-color:pink ">
</div>
<div style=" margin-left:220px; width:1000px; height:500px; background-color:green; padding:1px;">
<div style="width:200px; height:100px; margin:74px; background-color:lime;"></div>
<div style="width:1200px; height:100px; margin:74px; background-color:lime;"></div>
</div>
</div>
<div id='footerContent' style="min-width:100%; padding:0; background-color:black; height:150px; margin: 100px 0 0 0; position:relative;">
<div id="image" style="width:75px; height:75px; position:absolute; right:37px; bottom: 37px; background-color:yellow;"></div>
</div>
Is there some css or javascript that can be applied to this so that I can set the width of my footer to the actual width of the web page? I have checked document, window, and screen width/outerwidth; but each one fails to handle the overflow size of the page.
2 answers
solution1
1 2014-04-22 18:00:11
you could put a parent wrapper with the width ilke this:
<div id='wrapper' style="width:1000px;">
<div id='bodyContent' style="height:600px;">
<div style="/*width:1000px;*/ height:250px; background-color:green;"></div>
</div><div id='footerContent' style="width:100%; padding:0; background-color:black; height:150px; margin: 100px 0 0 0; position:relative;">
<div id="image" style="width:75px; height:75px; position:absolute; right:37px; bottom: 37px; background-color:yellow;"></div>
solution2
0 ACCPTED 2014-04-22 17:54:42
EDIT
//this will get the actual width or height of the specified element
<div id='bodyContent' style="height:600px; width:600px;">
<div style="width:200px; height: 400px; float:left; background-color:pink"></div>
<div style=" margin-left:220px; width:1000px; height:500px; background-color:green; padding:1px;">
<div style="width:200px; height:100px; margin:74px; background-color:lime;"></div>
<div style="width:1200px; height:100px; margin:74px; background-color:lime;">
<!-- Added this element as a check -->
<div style="width:5000px; height:100px; margin:74px; background-color:lime;"></div>
</div>
</div>
</div>
<div id='footerContent' style="min-width:100%; padding:0; background-color:black; height:150px; margin: 100px 0 0 0; position:relative;">
<div id="image" style="width:75px; height:75px; position:absolute; right:37px; bottom: 37px; background-color:yellow;"></div>
</div>
Javascript
//this returns the actual `width` and `height` of the specified element (excluding `borders`)
function getActualWH(el){
return {aW:el.scrollWidth,aH:el.scrollHeight}
}
//if you want the border's width included, than you can use one of my previous functions ->
function getElProps(el,attr){
//checking if the browser is Internet Explorer
isIEX = navigator.userAgent.match(/Trident/);
whaT_ = isIEX ? el.currentStyle : window.getComputedStyle(el);
getWhaT_ = isIEX ? whaT_.getAttribute(attr) : whaT_.getPropertyValue(attr);
return getWhaT_;
}
Example (without borders):
var element = document.getElementById('bodyContent');
width = getActualWH(element).aW;
height = getActualWH(element).aH;
Example (with borders):
width = getActualWH(element).aW;
borderLeftWidth = parseInt(getElProps(element,'border-left-width'));
borderRightWidth = parseInt(getElProps(element,'border-right-width'));
actualWidth = width + borderLeftWidth + borderRightWidth;
height = getActualWH(document.getElementById('bodyContent')).aH;
borderTopWidth = parseInt(getElProps(element,'border-top-width'));
borderBottomWidth = parseInt(getElProps(element,'border-bottom-width'));
actualWidth = width + borderTopWidth + borderBottomWidth;
This code also works in IE8 (if you're planning on supporting it)
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.