如何创建一个100%固定页脚与固定宽度中心透明间隙？

Question

如何创建一个100%固定页脚与固定宽度中心透明间隙？没有剧本！

以这种方式展开______ ______固定宽度隙______ >>>这样展开

我自己的解决方案

<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

仅使用CSS和CSS3 calc函数帮助：

可以使用以下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 */

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

演示

+1用于“提醒我想起webkit-calc问题”的作者

Answer 2

<div id="footer">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>


#footer {
  position: fixed; left: 0; bottom: 0; overflow: hidden; width: 100%;
}

#footer .left {
  float: left: width: 200px; height: 115px;
  background: url('../Images/Layout/footer_left.png') repeat-x;
}

#footer .right {
  float: right: width: 200px; height: 115px;
  background: url('../Images/Layout/footer_right.png') repeat-x;
}

#footer .center {
  overflow: hidden; height: 115px;
  background: url('../Images/Layout/footer_middle.png') no-repeat;
}

Answer 3

我不认为你可以做你想要的跨浏览器与CSS ，只有。然而，尽管你说没有脚本(嘿，不要打我，好吗？！)让我向您展示使用几行javascript (使用jQuery，但您不需要)就可以实现它是多么容易。

演示

HTML

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

CSS

#FtrM {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}
#FtrL, #FtrR, #FtrC {
    float: left;
    height: 100%;
}
#FtrL, #FtrR {
    width: 100px;
    background-color: black;
}

#FtrC {
    background: none;
    width: 200px;
}

JS

function calc() {
    $('#FtrL, #FtrR').width(($('#FtrM').width() - $('#FtrC').width()) / 2);
}
calc();
$(window).resize(calc);