Question

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

以这种方式扩展＆lt;＆lt;＆lt; _ __ _ __ 固定宽度差距 < strong> __ _ __ _ ＆gt;＆gt;＆gt;以这种方式扩展

我自己的解决方案

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

仅使用 CSS 与CSS3 计算功能帮助：

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

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但你不需要）

DEMO

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

Answer 4

HTML

<div class="contain">
<div class="footer">YOUR CONTENT HERE</div>
</div>

CSS：

.contain {width:100%;}
.footer {margin:0 auto;width:300px;height:50px;}

应该做你想做的事。除非我误解了你的问题...... http://jsfiddle.net/2Qw6D/1/

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

4 个答案:

HTML

CSS

JS