2012-01-28 80 views
1

這裏是我的代碼:你如何顯示:表單元格的寬度:100% - 270px

<div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->"> 
     <ul id="banner_ul"> 
      <li id="wrm"><a href="http://whiterootmedia.com"><i>The homepage of White Root Media!</i></a></li> 
      <li id="google"><a href="https://plus.google.com/u/0/b/115943543157099352927/115943543157099352927" target="_blank"><i>+1 us on Google!</i></a></li> 
      <li id="facebook"><a href="http://www.facebook.com/pages/White-Root-Media/194381903928501" target="_blank"><i>Like us on Facebook!</i></a></li> 
      <li id="twitter"><a href="http://twitter.com/#!/WhiteRootMedia" target="_blank"><i>Tweet about us on Twitter!</i></a></li> 
     </ul> 
    </div> 

    <div id="container" style="<!-- border:solid yellow 1px -->; display: table;"> 
     <div id="content" style="padding-top:90px; display:table-cell; min-width:945px; <!-- width:100% - 270px; -->"> 
      This content will determine the height 
     </div> 
     <div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div> 
    </div> 

    <div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div> 

這裏的活頁: http://whiterootmedia.com/test/test4/

我想內容的div是顯示:表格單元格將頁面的整個寬度減去270px。樹應該一路向右。

任何幫助,非常感謝!

感謝, 達斯蒂

回答

0

您可以使用絕對定位的子div的

#foo { 
    display: table; 
    height: 400px; 
    position: relative; 
    width: 500px; 
} 

#foo > div { 
    display: table-cell; 
    height: 100%; 
    position: absolute; 
} 

#left { 
    background: blue; 
    left: 0; 
    right: 200px; 
} 

#right { 
    background: green; 
    right: 0; 
    width: 200px; 
} 

click here for demo

有達到同樣的效果,如更改頁邊距的其他方法,我個人更喜歡上面的方法

相關問題