CSS-用固定位置填充頁面的剩餘寬度DIV

我在左側354px的頁面底部有一個固定位置的DIV。我需要DIV填充頁面的剩餘寬度。我怎樣才能做到這一點？由於CSS-用固定位置填充頁面的剩餘寬度DIV

看一看圖像...

http://www.freeimagehosting.net/uploads/a1b6e2946e.gif

編輯

<html> 

    <head> 
    <style type="text/css"> 
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td 
    { 
     margin: 0; 
     padding: 0; 
    } 

#Container{ 
width:100%; 
height:100%; 
background-color:gray;} 

#sidebar{ 
width:354px; 
height:100%; 
position:fixed; 
left:0px; 
top:0px; 
background-color:orange;} 

#toolbar{ 
height:40px; 
width:100%; 
position:fixed; 
bottom:0px; 
margin-left:354px; 
background-color:blue; 
text-align:right;color:white} 

</style> 

    </head> 

    <body> 
    <div id="container"> 
    <div id="sidebar"></div> 
    <div id="toolbar"> 
    Demo text 
    </div> 
    </div> 
    </body> 

</html>

來源

2010-07-01 Jess

向我們展示你迄今爲止的所作所爲。幾個問題給你。

1）您是否使用基於div的佈局來設置屏幕格式？ 2）如果你使用div，你使用的是固定大小（以像素爲單位）的寬度還是基於百分比的寬度？

[更新]

看到你的答案。我認爲你的答案仍然缺失，例如需要在右側填寫的內容。

<div id="container"> 
     <div id="sidebar"> 
     sidebar text 
     </div> 
     <div id="main"> 
      <div id="content"> 
      content1<br /> 
      content2<br /> 
... 
... 
... 
... 
      </div> 
      <div id="toolbar">My toolbar</div> 
     </div> 
    </div>

您需要考慮的另一個要求是內容部分的文本可能比屏幕高度更長。

來源

2010-07-01 07:39:04 Syd

這是一個大的網站有很多CSS和HTML這會搞亂事情，所以我已經添加的什麼，我試圖做一個小小的演示。注意當文本設置爲對齊div的右側時，工具欄div中的文本不可見。我只是在屏幕上填充了重新渲染的寬度。 1）是 2）兩者都是。 – Jess 2010-07-01 08:00:03

解決1日山坳

<!doctype html> 

     <head> 
     <style type="text/css"> 
     body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, 

blockquote, th, td 
     { 
      margin: 0; 
      padding: 0; 
     } 


    #sidebar{ 
    width:354px; 
    height:100%; 
    position:fixed; 
    left:0px; 
    top:0px; 
    background-color:orange;} 

    #toolbar{ 

    height:40px; 
    width:fill; 
    position:fixed; 
    bottom:0px; 
    right:0px; 
    left:354px; 
    background-color:blue; 
    text-align:right;color:white} 

    </style> 

     </head> 

     <body> 

     <div id="sidebar"></div> 
    <div id="toolbar"> 
     Demo text 
     </div> 

     </body> 

    </html>

來源

2010-07-01 08:17:32 Jess

使用保證金。閱讀

http://koolcss.blogspot.com/2010/06/two-columns-div-max-size-for-second.html

來源

2010-07-01 10:55:06 KoolKabin

CSS-用固定位置填充頁面的剩餘寬度DIV

回答

相關問題