Question

我的DIV位于页面底部的固定位置，距离左侧354px。我需要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>

Answer 1

告诉我们你到目前为止所做的工作。你几乎没有问题。

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>

您需要考虑的另一个要求是内容部分中的文字可能比屏幕高度更长。

Answer 2

<强>解决

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

Answer 3

在第1列上使用保证金。阅读

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

CSS-使用固定位置DIV填充页面的剩余宽度

3 个答案: