Не растягивается header по ширине

@Oleksandr07 · Регистрация: 23.10.2014

Студворк — интернет-сервис помощи студентам

При сравнение товаров, если их большое колличество, таблица вылазит за пределы рабочей области. Нужно, чтобы если таблица вылезет за пределы области, появился скролл. Проблема в том, что когда таблица вылезает за пределы экрана, при горизонтальным скроллинге сайта, фон хедера не растягивается на всю ширину экрана. Что посоветуете?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<body>
 <div class="wrapper">
  <div class="header">
  </div>
 </div>
 <div class="content">
  <div class="inner">
   <table></table>
  </div>
 </div>
</body>

CSS
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
body{width:100%;}
.inner{
 position:relative;
 margin:0 auto;
 width:980px;
}
.wrapper{
 position: relative;
}
.header{
 position: relative;
 background: url('../img/header_bg.jpg');
 min-width: 980px;
 padding: 30px 0px 10px;
 color: #fff;
 margin-bottom: 72px;
}
.content{
 position: relative;
 padding-bottom: 40px;
}
table {
 position: relative;
 width: 100%;
 border-collapse: separate;
 border-spacing: 0px;
}

@maximus2011 · 23.10.2014, 19:26

скролл надо делать в том блоке, в котором стоит таблица

overflow-y:auto;

@Oleksandr07 · 23.10.2014, 19:37 **[ТС]**

По замыслу дизайнера таблица не должна ограничиватся рабочей областью, а идти до бесконечности.
А если сделать скрол в том блоке, где таблица, тогда уже будет другая проблема. Тогда нужно будет сделать, что бы левый столбец, где описание характеристик, при скроле не прятался, а всегда был в одном месте

@maximus2011 · 23.10.2014, 19:40

да, верно говорите! Я кстати недавно тоже делал такую задумку дизайнера

В итоге клиент убрал все задумки и сделали по человечески, без всяких растягиваний до бесконечности

Ну а вообще чтобы хедер тянулся, надо ему прописать min-width, тогда он пойдет за скроллом

@Oleksandr07 · 23.10.2014, 19:47 **[ТС]**

Сообщение от maximus2011

Ну а вообще чтобы хедер тянулся, надо ему прописать min-width, тогда он пойдет за скроллом

там и так стоит min-width

@maximus2011 · 23.10.2014, 19:50

так у вас у body стоит ширина 980, ее убрать надо. body сам пусть тянется

@almaz1994 · 23.10.2014, 20:45

Уберите 100% для body. оно ж само и так растягивается

@Oleksandr07 · 23.10.2014, 21:12 **[ТС]**

Сообщение от maximus2011

так у вас у body стоит ширина 980, ее убрать надо. body сам пусть тянется

у меня в body ширина 100% а не 980

Добавлено через 51 секунду

Сообщение от almaz1994

Уберите 100% для body. оно ж само и так растягивается

body никак не влияет на мою проблему. убрал, ничего не изменилось

@Fedor92 · 23.10.2014, 22:07

Попробуйте задать ширину header в процентах, как вариант...

@Oleksandr07 · 23.10.2014, 22:55 **[ТС]**

Сообщение от Fedor92

Попробуйте задать ширину header в процентах, как вариант...

нет, не поможет. Может есть какое то решение на jquery?

@almaz1994 · 24.10.2014, 00:57

Прежде чем читать весь мусор со спойлера

попробуйте функцию ниже использовать

При этом для дивов задайте ширины через style= и уберите значения с css.

Кликните здесь для просмотра всего текста

Киньте ссылку, так влом набирать отдельно в файлы

Добавлено через 3 минуты
А в каком блоке собсно контент?

Добавлено через 2 минуты
Я бы вообще не заморачивался. Сделал блок один большой. Сверху спозиционировал картинку фоновую. На высоту картинки padding задал и контент внутри поместил.

Добавлено через 26 секунд
Я бы вообще не заморачивался. Сделал блок один большой. Сверху спозиционировал картинку фоновую. На высоту картинки padding задал и контент внутри поместил.

Добавлено через 28 минут
В долгих поисках решения Вашего вопроса, в посике наткнулся на такое решение немножко другой адачи:

PHP/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
<html>
 
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>1</title>
 
   <style type="text/css">
      * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
      body {margin:0; padding:0}
      div {height:300px; border:1px solid black}
   </style>
 
   <script type="text/javascript">
      function eq () {
         var l = document.getElementById('l');
         var c = document.getElementById('c');
         var r = document.getElementById('r');
         l.style.width = c.offsetLeft + 'px';
         r.style.width = (document.body.scrollWidth - (c.offsetLeft + c.offsetWidth)) + 'px';
      }
   </script>
</head>
 
<body onload="eq()" onresize="eq()">
 
   <div style="position:absolute; left:0; top:0" id="l">
      left
   </div>
   <center>
      <div style="width:300px" id="c">
         center
      </div>
   </center>
   <div style="position:absolute; right:0; top:0" id="r">
      right
   </div>
 
</body>
 
</html>

Решалась следующая задача:

Кликните здесь для просмотра всего текста

Имеем код типа:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<table cellpadding="0" cellspacing="0" border="01" width="100%">
<tr>
<td>
1
</td>
<td width="300">
2
</td>
<td>
3
</td></tr>
</table>

Как сделать, чтобы ячейка 1 и 3 были равны друг другу независимо от того сколько содержимого в них?
ЗЫ. центральная ячейка фиксированной ширины.

Прочитав это дело, понял что можно использовать некоторые моменты для решения Вашей задачи

Корректируйте JS под свои нужды и пользуйте) Круто же?)

Добавлено через 4 минуты
Больше скажу, думаю функция примерное такая будет:

JavaScript
1
2
3
4
5
function eq () {
         var wth_header = document.getElementById('header');
         var wth_content = document.getElementById('content');
         wth_header.style.width=wth_content.offsetWidth + 'px';       
}

@Oleksandr07 · 24.10.2014, 11:17 **[ТС]**

Сообщение от almaz1994

Прежде чем читать весь мусор со спойлера попробуйте функцию ниже использовать

Решил все таки обрезать таблицу рабочей областью и в родительском блоке сделать скролл

@almaz1994 · 24.10.2014, 15:19

А, ну тоже неплохо

Да в принципе такие вещи надо делать мне кажется вертикальным скролом внутри блока

А не горизонтальным) Так пользователю понятнее будет

Но... Как говорится, "На вкус и цвет товарищи разные"

Удачи

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	23.10.2014, 19:26
	скролл надо делать в том блоке, в котором стоит таблица overflow-y:auto; 0

@Oleksandr07 0 / 0 / 1 Регистрация: 23.10.2014 Сообщений: 11
	23.10.2014, 19:37 [ТС]
	По замыслу дизайнера таблица не должна ограничиватся рабочей областью, а идти до бесконечности. А если сделать скрол в том блоке, где таблица, тогда уже будет другая проблема. Тогда нужно будет сделать, что бы левый столбец, где описание характеристик, при скроле не прятался, а всегда был в одном месте 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	23.10.2014, 19:40
	да, верно говорите! Я кстати недавно тоже делал такую задумку дизайнера В итоге клиент убрал все задумки и сделали по человечески, без всяких растягиваний до бесконечности Ну а вообще чтобы хедер тянулся, надо ему прописать min-width, тогда он пойдет за скроллом 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	23.10.2014, 19:50
	так у вас у body стоит ширина 980, ее убрать надо. body сам пусть тянется 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	23.10.2014, 20:45
	Уберите 100% для body. оно ж само и так растягивается 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	23.10.2014, 22:07
	Попробуйте задать ширину header в процентах, как вариант... 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	24.10.2014, 15:19
	А, ну тоже неплохо Да в принципе такие вещи надо делать мне кажется вертикальным скролом внутри блока А не горизонтальным) Так пользователю понятнее будет Но... Как говорится, "На вкус и цвет товарищи разные" Удачи 0