HTML Div плавающий и размер - PullRequest
       0

HTML Div плавающий и размер

0 голосов
/ 18 февраля 2011

Я хочу сделать веб-страницу, которая использует 100% экранного пространства. У меня есть два деления:

1-е - меню с фиксированной шириной (~ 250 пикселей)
2-й - что осталось

Вводящая в заблуждение часть для меня состоит в том, что div меню не находится во втором div. Они оба находятся в конверте (ширина 100%). Проблема в том, что если я напишу 100% ширины для 2-го деления, он пойдет ниже меню. Если я напишу меньше%, я не могу быть уверен, как это будет отображаться в меньших разрешениях.

Есть какие-то отрицательные размеры или что-то в этом роде? ATM. 1-й делитель плавает влево, а 2-й плавает вправо.

UDPATE: вот код:

div.main {
  width: 100%;
}
div.1st {
  width: 250px;
  float: left;
}
div.2nd {
  width: 100%; #here should be the space that is left in the main div#
  float: right;
}

<div class="main">
    <div class="1st">menu</div>
    <div class="2nd">content</div>
</div>

Проблема: содержимое может быть настолько широким, насколько это необходимо, поэтому, если строка или объекты в нем достаточно велики, 2-й делитель опускается ниже 1-го. Ширина меню фиксированная.

ОБНОВЛЕНИЕ № 2: если я оставлю ширину содержимого пустой, то она также перейдет под меню, так как содержимое достаточно широк

Ответы [ 3 ]

0 голосов
/ 18 февраля 2011

Вы можете сделать что-то подобное: http://jsfiddle.net/steweb/78x8y/

разметка:

<div id="container">
    <div id="left">Width=> 250px, float left</div>

    <!-- following div takes automatically the remaining width, no need to declare further css rules -->
    <div id="remaining">Width => the remaining space</div>
</div>

css:

#container{
    width: 100%;
    float:left;
    overflow:hidden; /* instead of clearfix div */
}
#left{
    float:left;
    width:250px;
    background:red;
}
#remaining{
    overflow: hidden;
    background:#DEDEDE;
}
0 голосов
/ 18 февраля 2011

Посмотрите на этот пост, там у вас есть правильное решение:

http://www.alistapart.com/articles/holygrail

0 голосов
/ 18 февраля 2011

Да, вы можете определить ширину absolute расположенных элементов, установив left и right.Это заставляет браузер решать уравнение в стандарте для width.См. Например демо .

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