div с 3 столбцами произвольного размера и нижней

Я использую этот шаблон

<div id="block_content">
    <div id="block_center"> ARTICLE 
article_ajax_content </div> <div id="block_right"> Artile links </div> <div id="block_left"> banner </div> <div class="clear"></div> </div> <div class="clear"></div> <div id="block_buttom"> some text info about site and 31px height img </div>

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

Может ли кто-нибудь помочь мне с тем, как CSS (я не хочу использовать jQuery для привязки нижнего блока к координате fix y) должен выглядеть как для моего шаблона использования?

1
nl ja de

4 ответы

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

Убедитесь, что сумма всех ваших процентов по высоте составляет 100% (в случае, если вы хотите охватить весь экран).

Это гарантирует, что содержимое вашей страницы будет охватывать весь экран, независимо от разрешения экрана.

Относительные размеры каждого блока также сохраняются одинаково для всех разрешений.

Ключ должен использовать значения PERCENTAGE, а не значения PIXEL.

Чтобы разрешить данные статьи динамического размера, просто CSS в статье div имеет полосу прокрутки.

0
добавлено
Подводя итог вашим требованиям - центральный блок может занять сколько угодно высоты. Левый блок и правый блок должны иметь ту же высоту, что и центральный блок. Нижний блок должен следовать за этими 3 блоками и покрывать всю ширину. Все это расположение блоков должно иметь одну полосу прокрутки. Это правильно?
добавлено автор Sunil D S, источник
Также я не понимаю, почему вы хотите поместить блоки Center, Right, Left; в этой последовательности. Left, Center, Right с относительным позиционированием кажется более логичным. Правильно?
добавлено автор Sunil D S, источник
Порядок размещения блоков в коде не определяет важность блока. Он просто определяет позицию. Я настоятельно рекомендую вам попробовать, что я предложил в своем предыдущем комментарии.
добавлено автор Sunil D S, источник
relative в block_center приводит к поврежденной странице (я хочу, чтобы block_center перешел в html-код, слева и справа должен появиться после него и по отношению к нему). Плюс я хочу, чтобы страница имела обычный свиток - не прокрутка в block_center или block_content. Прямо сейчас проблема - block_center, меняющая высоту после загрузки страницы и block_buttom не следует за ней :( Если я пытаюсь использовать фиксированную позицию для block_buttom (которая sux по дизайну) - я испытываю трудности с установкой любого пространства после большого блока (block_buttom) и block_buttom идет на него, охватывая мир содержания :(
добавлено автор user2020432, источник
потому что в центре есть основное содержание, и я хочу поставить его выше в коде, левый блок - менее важный из всех - я хочу поставить его как можно ближе к концу
добавлено автор user2020432, источник
Предварительный просмотр в Google с сайтом: mysite.com выглядеть лучше - не дерьмо из левого блока. проблема с разным разрешением и размером окна, я решил исправить с помощью jQuery - выглядит нормально. Будет ли у него некоторое seo или удобство использования (страница действует лучше) эффект - время покажет.
добавлено автор user2020432, источник

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

Убедитесь, что сумма всех ваших процентов по высоте составляет 100% (в случае, если вы хотите охватить весь экран).

Это гарантирует, что содержимое вашей страницы будет охватывать весь экран, независимо от разрешения экрана.

Относительные размеры каждого блока также сохраняются одинаково для всех разрешений.

Ключ должен использовать значения PERCENTAGE, а не значения PIXEL.

Чтобы разрешить данные статьи динамического размера, просто CSS в статье div имеет полосу прокрутки.

0
добавлено
Подводя итог вашим требованиям - центральный блок может занять сколько угодно высоты. Левый блок и правый блок должны иметь ту же высоту, что и центральный блок. Нижний блок должен следовать за этими 3 блоками и покрывать всю ширину. Все это расположение блоков должно иметь одну полосу прокрутки. Это правильно?
добавлено автор Sunil D S, источник
Также я не понимаю, почему вы хотите поместить блоки Center, Right, Left; в этой последовательности. Left, Center, Right с относительным позиционированием кажется более логичным. Правильно?
добавлено автор Sunil D S, источник
Порядок размещения блоков в коде не определяет важность блока. Он просто определяет позицию. Я настоятельно рекомендую вам попробовать, что я предложил в своем предыдущем комментарии.
добавлено автор Sunil D S, источник
relative в block_center приводит к поврежденной странице (я хочу, чтобы block_center перешел в html-код, слева и справа должен появиться после него и по отношению к нему). Плюс я хочу, чтобы страница имела обычный свиток - не прокрутка в block_center или block_content. Прямо сейчас проблема - block_center, меняющая высоту после загрузки страницы и block_buttom не следует за ней :( Если я пытаюсь использовать фиксированную позицию для block_buttom (которая sux по дизайну) - я испытываю трудности с установкой любого пространства после большого блока (block_buttom) и block_buttom идет на него, охватывая мир содержания :(
добавлено автор user2020432, источник
потому что в центре есть основное содержание, и я хочу поставить его выше в коде, левый блок - менее важный из всех - я хочу поставить его как можно ближе к концу
добавлено автор user2020432, источник
Предварительный просмотр в Google с сайтом: mysite.com выглядеть лучше - не дерьмо из левого блока. проблема с разным разрешением и размером окна, я решил исправить с помощью jQuery - выглядит нормально. Будет ли у него некоторое seo или удобство использования (страница действует лучше) эффект - время покажет.
добавлено автор user2020432, источник

это в настоящее время действительно хочу, я хочу


на высоком разрешении он выглядит очень красиво, на нижнем - все еще требует некоторой настройки с поиском баланса размера центрального блока и пробелов между фиксированным размером left \ right blocks

0
добавлено

это в настоящее время действительно хочу, я хочу


на высоком разрешении он выглядит очень красиво, на нижнем - все еще требует некоторой настройки с поиском баланса размера центрального блока и пробелов между фиксированным размером left \ right blocks

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)