ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div width=100%
2 сообщений из 2, страница 1 из 1
div width=100%
    #40137668
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет!

Есть 2 дива, расположенные в ряд. У первого ширина 80 пикселей.
А второй должен занимать всю оставшуюся часть экрана.
Если ему задать ширину в 100%, он либо выйдет за пределы экрана и появится горизонтальный скролл, либо "свалится" под первый.

Как решить задачу?
Я пока решил это средствами JS, но фигово, наблюдаются "прыжки", т.е. он сначала отображается, как есть, а потом подтягивается до нужной ширины. А средствами CSS как это решить?

Заранее благодарю!
...
Рейтинг: 0 / 0
04.03.2022, 23:57
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
div width=100%
    #40138159
Пенсионер
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пенсионер
Модератор форума
Что-то форум не оживает никак... Надо новые сообщения делать, для поисковиков...
-------

Нативный код, на вскидку...

Вариант 1 - float плюс отступ
Код: HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<!DOCTYPE html>
<html lang="ru">
<head>
  <style>
    * { margin:0; padding:0; }
    .d80 { position:relative; float:left; width:80px; border:solid 1px #000000; }
    .div1 { position:relative; margin:0 0 0 100px; background:#eeeeee; }
  </style>
</head>
<body>
<div class="d80">80px</div>
<div class="div1">
   <p>Основной блок</p>
   <p>Текст</p>
</div>
</body>
</html>
</html>
.
.
Вариант 2 - вложенный DIV
Код: HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE html>
<html lang="ru">
<head>
  <style>
    * { margin:0; padding:0; }
    .container { position:relative; background:#eeeeee; }
    .d80 { position:relative; float:left; margin:0 20px 0 0; width:80px; border:solid 1px #000000; }
  </style>
</head>
<body>
 <div class="container">
   <div class="d80">80px</div>
   <p>Блок во всю ширину экрана</p>
   <p>Текст</p>
</div>
</body>
</html>
.
.
Вариант 3 - вложенный DIV с абсолютным позиционированием.
Код: HTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE html>
<html lang="ru">
<head>
  <style>
    * { margin:0; padding:0; }
    .container { position:relative; padding:0 0 0 100px; background:#eeeeee; }
    .d80 { position:absolute; top:0; left:0; width:80px; border:solid 1px #000000; }
  </style>
</head>
<body>
 <div class="container">
   <p>Блок во всю ширину экрана</p>
   <p>Текст</p>
   <div class="d80">80px</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
20.10.2023, 00:30
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div width=100%
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=1&tid=1443116]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 30ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 35ms
get tp. blocked users:
 1ms
others: 259ms
total:  368ms
созд. / загр.: 368ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]