CSS - заполнить оставшуюся ширину страницы фиксированной позицией DIV - PullRequest
Новая
       3

CSS - заполнить оставшуюся ширину страницы фиксированной позицией DIV

0 голосов
/ 01 июля 2010

У меня есть DIV в фиксированной позиции в нижней части страницы, которая составляет 354 пикселей слева. Мне нужно 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>

Ответы [ 3 ]

0 голосов
/ 01 июля 2010

решаемые 

   <!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>
0 голосов
/ 01 июля 2010

Используйте маржу на 1-й колон Прочитайте

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

0 голосов
/ 01 июля 2010

Покажите нам, что вы сделали до сих пор. Несколько вопросов к тебе.

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>

Другое требование, которое вам необходимо учитывать, заключается в том, что текст в разделе содержимого может быть длиннее, чем высота экрана.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...