Question

我有一个页脚，右侧有一个图像。下面是所述页脚的抽象样本。

问题是，每当页面对于窗口变得太宽并且水平滚动变为活动时，我的页脚宽度将继续依赖于主体的宽度，而不是内容的实际宽度。 / p>

<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>

是否有一些css或javascript可以应用于此，以便我可以将页脚的宽度设置为网页的实际宽度？我检查了文档，窗口和屏幕宽度/外部宽度;但每个人都无法处理页面的溢出大小。

Answer 1

你可以放一个宽度为ilke的父包装器：

http://jsfiddle.net/Lw54F/

<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>

Answer 2

修改

//这将获得指定元素的实际width或height

<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 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} }

//如果你想要包含边框的宽度，那么你可以使用我以前的一个功能 - ＆gt;

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_; }

示例（无边框）：

DEMO

var element = document.getElementById('bodyContent'); width = getActualWH(element).aW; height = getActualWH(element).aH;

示例（带边框）：

DEMO

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;

此代码也适用于IE8（如果您正计划支持它）

获取元素的实际宽度？

2 个答案: