HTML5 CSS3頁腳欄

Question

如何在寬度上執行此操作？灰色的中間div是100％ - 50px - 50px。請顯示代碼;下面這個形象是我的猜測

實例：（http://mediahood.net/mesgr.png）

<div style="position:absolute;left:0px;width:50px;height:50px;"> 
<div style="width:50;height:50px;background-color:#000;margin:0px;"> 
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div> 
</div> 

<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;"> 
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'> 
</div> 

<div style="position:absolute;right:0px;width:50px;height:50px;"> 
<div style="width:50px;height:50px;background-color:#000;margin:0px;"> 
<span id='charCount'>150</span><span id='charCount2'> chars.</span> 
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send"> 
</div> 
</div> 

</dov> 

Answer 1

關於內格設置保證金是什麼？

只是爲了方便顯示樣式標籤，移動到CSS文件。

<style> 
.outer { 
    width: 400px; 
    background-color: #ddd; 

} 

.inner { 
    margin: 0 50px; 
    background-color: #ccc; 
} 
</style> 

<div class="outer"> 
    <div class="inner"> 
     inner div 
    </div> 
</div> 

Answer 2

我有兩個例子。第一個使用一個固定的高度作爲一個整體，並漂浮在兩側。第二個使用可變高度頁腳（基於「中間」div的內容），使用將頁腳背景設置爲黑色並將中間部分設置爲灰色和邊緣的技巧來揭示該區域其餘區域的背景可變高度的邊不會擴展到（如果不是邊距，文本下方會出現灰色）。

<div id="footer"> 
    <div id="left">50px</div> 
    <div id="right">50px</div> 
    <div id="middle">100%</div> 
</div> 
<div>2:</div> 
<div id="footer2"> 
    <div id="left2">50px</div> 
    <div id="right2">50px</div> 
    <div id="middle2">100%<br />100%<br />100%</div> 
</div> 

CSS：

#footer { 
    height: 115px; 
    text-align: center; 
    background: #ccc; 
} 
#left { 
    float: left; 
    height: 100%; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
} 
#right { 
    float: right; 
    height: 100%; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
} 
#footer2 { 
    text-align: center; 
    background: #000; 
} 
#left2 { 
    height: 100%; 
    float: left; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
} 
#right2 { 
    float: right; 
    color: #fff; 
    text-align: center; 
    width: 50px; 
    height: 100%; 
} 
#middle2 { 
    margin: 0 50px; 
    background: #ccc; 
}