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計算関数ヘルプで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を使用する必要があるかもしれません（もしそうなら、私の他の答えを参照してください）

デモ

webkit-calcを思い出させるための質問の作者は+1

于 2013-03-18T21:23:07.647 に答える
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 に答える
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 に答える
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 に答える