Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 05.10.2018, 12:52   #1
OmegaBerkut
Спокойный псих
Участник клуба
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 977
Репутация: 160
По умолчанию Запретить "резиновые" размеры блока

Здрасте.
Сегодня при вёрстке обнаружил следующую проблему: размещаю табличные данные в блоке, и когда размеры данных становятся больше нужного размера - родительский контейнер начинает растягиваться ...
Код:

<table class="table_content"> // вёрстка на таблицах, с помесью CSS
	<tr>
		<td class="column_header cell_panel">
			<?php echo $panel_data; ?> // здесь пусть будет что угодно
		</td>
		<td class="column_body cell_body"<?php echo $body_align_params; ?>>
			<div style="overflow:auto;max-width:100%;box-sizing:border-box;"> // здесь что я только не пихал
				<?php echo $info_data; ?> // здесь тоже что угодно
			</div>
		</td>
	</tr>
</table>

Проблема в обозначенном месте подчёркнутый комментарий. Когда размеры внутренних данных становятся слишком большие - родительский контейнер начинает деформироваться ... А мне нужно, что бы родительский контейнер оставался какой нужно изначально, и при overflow появлялись полосы прокрутки в пределах зафиксированного контейнера. Все размеры в процентах.
Дальше CSS
Код:

body,html
{
	width:100%;
	height:98.8%; // подобрал значение, в разных браузерах появляется вертикальная полоса проктутки
	margin:0;
}

.table_content,
.column_header,
.column_body,
.cell_panel,
.cell_body
{
	overflow:auto;
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	border-spacing:0px;
}
.table_content
{
	margin:0.5% 0.5% 0% 0.5%;
	width:99%;
}
.table_content
{
	margin:0% 0.5% 0% 0.5%;
	height:95%; // это главный элемент таблицы, и мне нужно запретить ему менять размеры; остальные 5 % это header и footer
	// здесь много переопределений, так как свойства используются в других таблицах (header и footer)
}
.column_body
{
	background-color:#FFFFFF;
}
.cell_panel
{
	width:20%; // ну это типа панель переходов всё такое =)
}
.cell_body
{
	width:80%;
}

__________________
Подпись ? Не, не слышал ...
OmegaBerkut вне форума   Ответить с цитированием
Старый 08.10.2018, 11:22   #2
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 145
Репутация: 193
По умолчанию

Попробуйте для самой таблицы задать table-layout fixed
SQLPowerUser вне форума   Ответить с цитированием
Старый 08.10.2018, 16:19   #3
OmegaBerkut
Спокойный псих
Участник клуба
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 977
Репутация: 160
По умолчанию

SQLPowerUser, спасибо, это сработало.

UPD. Представленный вариант в чистом виде нормально работает только на компе, и только в опере. В мозилле и хроме содержимое таблицы всё равно выезжает за пределы экрана (граница при этом остаётся на месте), а на телефоне вообще какая то дичь происходит.
В итоге содержимое таблицы всё равно нужно взять в div
Цитата:
Сообщение от OmegaBerkut Посмотреть сообщение
Код:

<div style="overflow:auto;">
	<?php echo $info_data; ?>
</div>

__________________
Подпись ? Не, не слышал ...

Последний раз редактировалось OmegaBerkut; 09.10.2018 в 01:36.
OmegaBerkut вне форума   Ответить с цитированием
Старый 10.10.2018, 08:22   #4
OmegaBerkut
Спокойный псих
Участник клуба
 
Аватар для OmegaBerkut
 
Регистрация: 19.03.2013
Адрес: Украина
Сообщений: 977
Репутация: 160
По умолчанию

UPD: огнелис не понимает что такое overflow , так что там у меня теперь высота всего макета начинается с 98.8 % высоты рабочей области браузера, и заканчивается высотой содержимого + мелочи по самому макету ... При этом же, с шириной в лисе всё нормально ...
__________________
Подпись ? Не, не слышал ...

Последний раз редактировалось OmegaBerkut; 10.10.2018 в 22:31.
OmegaBerkut вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка блока внизу блока родителя, без использования "relative" Bulat Ibrahim HTML и CSS 21 30.05.2017 00:58
Запретить вырезать ячейки и ставить "." и "/" Ogeris Microsoft Office Excel 3 10.05.2017 12:59
Убрать папки "Pictures", "Music", "Видео", "Downloads" из "МОЙ КОМПЬЮТЕР" Бахтиёр1916 Windows 1 05.04.2017 13:53
Нужно пояснить/прокомментировать код программы, или коды функций "Добавить" "Удалить" "Обновить(редактировать" "Поиск" "Период") ZIRASS PHP 4 15.06.2016 15:23


01:59.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru