Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div width=100% / 2 сообщений из 2, страница 1 из 1
04.03.2022, 23:57
    #40137668
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div width=100%
Всем привет!

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

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

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

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

Вариант 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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / div width=100% / 2 сообщений из 2, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 5384ms
Закрыть
start [/forum/moderation_log.php?user_name=Kaktyc007]:
 0ms
get settings:
 12ms
get forum list:
 15ms
get settings:
 12ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 33ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 2ms
others: 5241ms
total:  5384ms
x
x
Закрыть


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