ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (CSS) Горизонтальное растежение блока по содержимому
11 сообщений из 11, страница 1 из 1
(CSS) Горизонтальное растежение блока по содержимому
    #38127757
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
Задача:
1. есть класс CSS скроллер задача которого скролировать все что не уметилось внутри него по x и y.
2. в нем вложен класс декоратор box цель которого задавать фон и отступы
3. в него вложено нечто большое по размерам как по x так и по y
Ожидаем что нечто расширит box до нужных размеров как по x так и по y. Нв деле-же происходит растежение лишь по y, а по x нечто как бы пробивает box и рисуется на фоне скроллера что не есть хорошо.

Как заставить нечто растягивать box по x?

Нужно CSS решение без JS.

Демо пример со скроллером, box и нечто:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html, body {
    display: block;
    position: relative;
    height:100%;
    width:100%;
    
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    }
    .scroller {
    display: block;
    position: relative;
    height:100%;
    width:100%;

    background-color: grey;
    overflow-x: scroll;
    overflow-y: scroll;
    }
    .box {
    display: block;
    position: relative;
    margin: 10px;
    
    background-color: white;
    
    overflow: visible;
    *width:100%;
    }
    .boroda {
    display: block;
    position: relative;
    width:20000px;
    height:20000px;
    }
  </style>
  <body>
    <div class="scroller">
      <div class="box">
        <div class="boroda">11</div>
      </div>
    </div>
  </body>
</html>
...
Рейтинг: 0 / 0
28.01.2013, 18:15
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38127773
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
NT ManКак заставить нечто растягивать box по x?Нечто не должно иметь возможности переноса. Типа широченной таблицы или nobr.
...
Рейтинг: 0 / 0
28.01.2013, 18:21
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38127802
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
AntonariyНечто не должно иметь возможности переноса. Типа широченной таблицы или nobr.
См. пример там в роли нечто выступает
Код: css
1.
2.
3.
4.
5.
6.
.boroda {
    display: block;
    position: relative;
    width:20000px;
    height:20000px;
    }


Этого же достаточно? покрайней мере на скроллер же воздействует.
...
Рейтинг: 0 / 0
28.01.2013, 18:32
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38127859
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
А, я не так задание понял.
Ну, можно задать боксу position:absolute, но отступа справа и снизу от скроллера у него не будет. Табличкой может бокс сделать? Правая колонка тогда будет отступом. Или в три колонки без маргинов.
...
Рейтинг: 0 / 0
28.01.2013, 19:03
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38127955
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
AntonariyА, я не так задание понял.
Ну, можно задать боксу position:absolute, но отступа справа и снизу от скроллера у него не будет. Табличкой может бокс сделать? Правая колонка тогда будет отступом. Или в три колонки без маргинов.
Таблица? А нет менее извращенного разве способа?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html, body {
    display: block;
    position: relative;
    height:100%;
    width:100%;
    
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    }
    .scroller {
    display: block;
    position: relative;
    height:100%;
    width:100%;
    
    background-color: grey;
    overflow-x: scroll;
    overflow-y: scroll;
    }
    .box {
    display: block;
    position: relative;
    margin: 10px;
    
    background-color: white;
    
    overflow: visible;
    *width:100%;
    }
    .boroda {
    display: block;
    position: relative;
    width:20000px;
    height:20000px;
    }
  </style>
  <body>
    <div class="scroller">
      <table class="box">
        <tr>
          <td>
            <div class="boroda">11</div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>



Кстати с таблицей тоже трюк не удался.
...
Рейтинг: 0 / 0
28.01.2013, 20:24
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38128187
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
NT ManКстати с таблицей тоже трюк не удался.position:absolute не сделали.
...
Рейтинг: 0 / 0
29.01.2013, 07:46
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38128227
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT ManОжидаем что нечто расширит box до нужных размеров как по x так и по y.
Напрасно ожидаете...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
	position: relative;
	overflow: visible;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}
.boroda {
	position: relative;
	width: 200px;
	height: 200px;
	border: 1px solid green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="box">
	<div class="boroda">11</div>
</div>
</body>
</html>


Потому как

Код: css
1.
overflow: visible;


автор Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
http://htmlbook.ru/css/overflow

А растягивание никто не обещал...
...
Рейтинг: 0 / 0
29.01.2013, 09:10
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38128231
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT Man , ты сильно перебарщиваешь с

Код: css
1.
display: block;
...
Рейтинг: 0 / 0
29.01.2013, 09:11
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38128267
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT ManКстати с таблицей тоже трюк не удался.
А так?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.scroller {
	width: 200px;
	height: 100px;
	overflow: auto;
}
.boroda {
	position: relative;
	width: 20000px;
	height: 200px;
	border: 1px solid green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class='scroller'>
	<table border='1'>
		<td>
			<div class="boroda">11</div>
		</td>
	</table>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
29.01.2013, 09:39
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38128291
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
На хабре подсказали вот такое красивое решение:
Ключ к решению проблемы использование {display: inline-block;} для декоратора.
Через {position:absolute;} тоже можно решить проблему, но потом тяжко будет делать отступы. (через таблицы и прочий хентай)

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html, body {
		height:100%;
		width:100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
    }
    .scroller {
		height:100%;
		width:100%;
		background-color: grey;
		overflow: auto;
		padding: 10px;
		box-sizing: border-box;
    }
    .box {
		display: inline-block;    
		background-color: white;
		min-width: 100%;
		min-height: 100%;
    }
    .boroda {
		display: block;
		position: relative;
		width:20000px;
		height:20000px;
    }
  </style>
  <body>
    <div class="scroller">
      <div class="box">
        <div class="boroda">11</div>
      </div>
    </div>
  </body>
</html>
...
Рейтинг: 0 / 0
29.01.2013, 09:53
| Ответить | Цитировать | Написать  
(CSS) Горизонтальное растежение блока по содержимому
    #38128306
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT ManКлюч к решению проблемы использование {display: inline-block;} для декоратора.
Это не будет работать в старых версиях...
...
Рейтинг: 0 / 0
29.01.2013, 10:06
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / (CSS) Горизонтальное растежение блока по содержимому
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38128267&tid=1448798]:
 0ms
get settings:
 7ms
get forum list:
 16ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 164ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 257ms
total:  517ms
созд. / загр.: 517ms
x
x
Закрыть


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