Я начал с этого образца CSS-шаблона , который предоставляет липкий нижний колонтитул с центрированным макетом из 3 столбцов. 2 боковых столбца имеют фиксированную ширину, и основное содержимое должно быть сжато, чтобы соответствовать размеру его содержимого, но вместо этого растягивается до значения max-width, определенного в CSS для оболочки. Основной контент растягивается, потому что CSS не содержит никаких стилей, которые вызывают сжатие (например, "display:inline", "display:inline-block", "float:left", "display:table", "display:inline-table" , так далее...). И, наконец, обертка содержит все, кроме липкого нижнего колонтитула.
Я попытался установить оболочку с помощью display:table, чтобы уменьшить объем основного содержимого, что было сделано, но теперь нижний колонтитул, находящийся вне оболочки div, имеет неправильную ширину. Ранее он соответствовал своей ширине так же, как и обертка, по умолчанию установив стиль max-width, который он установил, который соответствовал тому же типу max-width на обертке. Я не эксперт по CSS, но я также пытался переместить липкий нижний колонтитул внутри оболочки, используя альтернативную технику липкого нижнего колонтитула, но затем у меня возникли конфликтующие стили CSS, необходимые для столбцов искусственного текста, со стилями, необходимыми для того, чтобы липкий нижний колонтитул находился внутри оболочки. Я не знаю, может быть, это можно сделать таким образом, но из моего первоначального «быстрого» теста это стало грязным.
Я бы предпочел не изменять размер с помощью javascript, а вместо этого заставить его работать с CSS, если это возможно. Есть идеи с CSS?
И вот вам и скрипка без добавления «display: table» в оболочку CSS. Добавьте это, и тогда начнутся проблемы.