html - 如何创建具有固定宽度中心透明间隙的 100% 固定页脚？

Question

如何创建具有固定宽度中心透明间隙的 100% 固定页脚？没有脚本!

以这种方式展开 <<<______ 固定宽度间隙 ______>>> 以这种方式扩展

我自己的解决方案

HTML

<div id="Ftr">
  <div id="FtrL"></div>
  <div id="FtrM"></div>
  <div id="FtrR"></div>
</div>

CSS

#Ftr {
    position: fixed;
    height: 115px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 21;
}
#FtrL,
#FtrR {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: calc(50% - 360px);
    width: -webkit-calc(50% - 360px);
}
#FtrL {
    background: url('../Images/Layout/footer_left.png') repeat-x;
    left: 0;
}
#FtrR {
    background: url('../Images/Layout/footer_left.png') repeat-x;
    right: 0;
}
#FtrM {
    background: url('../Images/Layout/footer_middle.png') no-repeat;
    height: 115px;
    width: 720px;
    margin: 0 auto;
}

在此处查看实时数据: http://www.dreamtek.info

Answer 1

Using only CSS with CSS3 calc function 帮助:

您可以使用以下 CSS 属性定义侧 DIV 元素的宽度:

width: calc((100% - 200px) / 2); /* browsers with native support */
width: -webkit-calc((100% - 200px) / 2); /* webkit browsers support, Chrome, Safari... */
width: -moz-calc((100% - 200px) / 2); /* Firefox support */

其中 200px 是中心 DIV 的固定宽度。这样，剩余的水平空间将由两侧的 DIV 元素平均填充。请注意，这不是跨浏览器兼容的解决方案。如果你想要一个，你可能需要使用 javascript (如果是这样，请参阅我的其他答案)

DEMO

为提醒我 webkit-calc

问题的作者 +1