2

如何创建具有固定宽度中心透明间隙的 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

4

4 回答 4

2

仅使用带有 CSS3 calc 函数帮助的CSS ：

您可以使用以下 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 （如果需要，请参阅我的其他答案）

演示

+1 提醒我webkit-calc问题的作者

于 2013-03-18T21:23:07.647 回答
1

我认为你不能只用 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);
于 2013-03-18T20:50:02.293 回答
1 
<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;
}
于 2013-03-18T20:15:53.740 回答
0

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/

于 2013-03-18T20:10:26.790 回答