2 столбца 100% макета - 1 фиксированный столбец и 1 динамический столбец - PullRequest
Новая
       3

2 столбца 100% макета - 1 фиксированный столбец и 1 динамический столбец

4 голосов
/ 11 марта 2012

По сути, контейнер должен иметь ширину 100% (т.е. он будет заполнять всю страницу), и у него будет два столбца:

  • столбец 1 - это панель навигации, и он должен оставатьсяфиксированная ширина, например 200px
  • , столбец 2 является областью содержимого и не должен иметь определенной ширины - он должен просто заполнить оставшуюся область и настроить в соответствии с размерами экрана / окна

Чтолучший способ сделать это?

XHTML: 

<body>
    <div id="container">
        <div id="navbar">
          &nbsp;
        </div>

        <div id="content">
          &nbsp;
        </div>
    </div>
</body>

CSS: 

#container { float: left; width: 100%; }
#navbar { float: left; width: 200px; height: 800px; }
#content { float: left; height: 800px; ??? }

1 Ответ

4 голосов
/ 11 марта 2012

Я бы сделал это, установив минимальную ширину для контейнера и содержимого div, с левым полем для содержимого div, что позволяет ему скользить рядом с nav div.Левое поле плюс минимальная ширина должны равняться минимальной ширине контейнера.Я добавил границу, чтобы вы могли видеть, что она имеет правильные размеры. 

#container
{
    width: 100%;
    min-width: 960px;
}

#nav
{
    float: left;
    width: 200px;
    height: 100%;
    min-height: 800px;
    border: 1px solid #ff0000;
}

#content
{
    margin-left: 205px;
    min-width: 755px;
    height: 100%;
    min-height: 800px;
    border: 1px solid #0000ff;
}

Fiddle at http://jsfiddle.net/bmMTW/

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

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

...