Изменение размера заголовка и нижнего колонтитула при изменении размера окна

Question

Я закодировал себя в угол, или я наблюдаю за чем-то очевидным здесь. У меня есть макет CSS полужидкого, который предназначен, как это:

заголовок - ширина 100% в любое время, содержит й-повторенного фоновое изображение

контейнера - жидкость (960 х к 1200px, центрированной, содержит два столбцы)

колонтитул - ширина 100% в любое время, содержит й-повторенного фонового изображение

почти во всех случаях это работает отлично.

Таким образом, дизайн в целом масштабируется до любой ширины, но часть контента составляет всего 1200 пикселей по максимальной. Однако, поскольку это касается фотосайта, иногда изображения шире, чем ширина контейнера 1200 пикселей, и изображение вырывается из него. Это прекрасно, я хочу показать полное изображение. Тем не менее, я хочу, чтобы верхний и нижний колонтитулы масштабировались до самого широкого элемента, в данном случае изображения. Этого не происходит и особенно неприятно, когда я изменяю размер окна меньше ширины изображения, а затем прокручиваю вправо, используя горизонтальную полосу прокрутки: он оставляет четкий пробел как в верхнем, так и нижнем колонтитуле, пока я хочу, чтобы они растянулись до меньше ширины изображения/содержимого.

Просто установить ширину до 100% недостаточно, поскольку это касается области просмотра, а не ширины содержимого. Я могу принудительно использовать min-width с большим значением для верхнего и нижнего колонтитула, но это оставляет горизонтальную полосу прокрутки в нормальных разрешениях. Я мог бы скрыть эту полосу прокрутки с использованием переполнения: скрытый, но это будет прерывать содержимое и не отображать полосу прокрутки, когда окно мало.

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

Answer 1

Ширина 100% устанавливает ширину элемента на 100% ширины элемента, в котором он содержится. В вашем случае, похоже, это само окно (или элемент тела). Чтобы сделать верхние и нижние колонтитулы (я предполагаю, что вы используете divs здесь) масштабируются с изображением, им, вероятно, нужно будет либо включить в тот же div, что и изображение, либо внутри div, что изображение div также находится в предположении, что div масштабируется до правильной ширины (не предполагайте, что он масштабируется, чтобы соответствовать изображению).

Однако во многих случаях использование таблицы для вашего макета может быть намного чище и будет обрабатывать тип горизонтального масштабирования, который вы ищете, не прибегая к использованию css-хаков.

Answer 2

Чтобы сделать длинную историю короткой, я думаю , что я хочу, что эта схема будет работа как таблица будет работать

дисплей: стол на общий контейнер из этих элементов, и дисплей : table-row или table-cell для своих детей. Это не будет работать в IE6, но умные вещи могут быть сделаны с помощью CSS expression() hack, чтобы имитировать это.

Я бы предпочел, однако, чтобы вы не устанавливали максимальную ширину и позволяли дизайну течь лучше в соответствии с желаемым размером окна пользователя.