CSS- Fill remaining width of page with a fixed position DIV_问答_开发者

CSS- Fill remaining width of page with a fixed position DIV

开发者 https://www.devze.com 2023-01-05 20:48 出处：网络

I have a DIV in a fixed position on the bottom of a page which is 354px from the left. I need the DIV to fill the remaining width of the开发者_Python百科 page.How can I do this? Thanks

相关专题：css

I have a DIV in a fixed position on the bottom of a page which is 354px from the left. I need the DIV to fill the remaining width of the开发者_Python百科 page. How can I do this? Thanks

Take a look at the image...

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

Edit

  <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>

Solved

   <!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>

Use margin on 1st col. Read the

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

Show us what you have done so far. Few questions for you.

1) Are you using divs based layouts to format your screen?

2) If you are using divs, are you using fixed size (in pixels) width or percentage based width?

[Updated]

Saw your answer. I think your answer is still missing something e.g. the content that needs to be filled in on the right hand side.

    <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>

The other requirement that you would need to consider is that the text in the content section may be longer than the screen height.