CSS- Fill remaining width of page with a fixed position DIV
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.
加载中,请稍侯......
精彩评论