Jump to content
  • 0

content + sidebar как сделать равную высоту между ними?


Temik2704
 Share

Question

Добрый вечер!

Есть главный блок main - в нем 2 блока - content и sidebar

Как сделать так чтобы любой из них выравнивался по высоте большего блока?

Т.е. если в content получается больше информации и он стал больше сайдбара,то сайдбар подтягивается к нему по высоте и наоборот?

 

Вот макет по которому делаю:

http://cs413616.vk.me/v413616149/5558/j9grtCN4nEQ.jpg

 

Вот мой макет

http://cssdeck.com/labs/doi6kbsh

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Link to comment
Share on other sites

  • 0

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Ширина сайдбара и так задана.

А нельзя никак обойтись без абс.позиционирования?

 

Почему когда я задаю высоту сайдбару в пикселях,все нормально,а когда в % то фон исчезает?

Link to comment
Share on other sites

  • 0

в данном случае я так понял главная задача это потянуть фон. можно воспользоваться старым дедовским методом, задайте фон на оберточный блок #main-block. Можно вырезать однопиксельную репит полоску или градиентом сделать фон (это в случае если нет резины)

если есть резина то можно через табличные свойства

#main-block{display: table;}#content,#sidebar{display: table-cell;vertical-align: top;/* убрать флоат */}
Link to comment
Share on other sites

  • 0

 

в данном случае я так понял главная задача это потянуть фон. можно воспользоваться старым дедовским методом, задайте фон на оберточный блок #main-block. Можно вырезать однопиксельную репит полоску или градиентом сделать фон (это в случае если нет резины)

если есть резина то можно через табличные свойства

#main-block{display: table;}#content,#sidebar{display: table-cell;vertical-align: top;/* убрать флоат */}

display: table-cell; дедовский способ? да вы шутите...

Link to comment
Share on other sites

  • 0

 

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Ширина сайдбара и так задана.

А нельзя никак обойтись без абс.позиционирования?

 

Почему когда я задаю высоту сайдбару в пикселях,все нормально,а когда в % то фон исчезает?

 

 

А чем плох такой способ?

К тому же, можно схитрить и сделать только видимость того что сайдбар равен ширине контента.

Вырезать полоску с фоном, и повторять для враппера.

Link to comment
Share on other sites

  • 0

 

контейнеру position: relative;

 

контенту задайте ширину, прижмите к левой стороне (float: left)

сайдбару задайте ширину, и с помощью абсолютного позиционирования прижмите к правой, верхней и нижней части родителя ( right:0;  top:0; bottom: 0;)

Ширина сайдбара и так задана.

А нельзя никак обойтись без абс.позиционирования?

 

Почему когда я задаю высоту сайдбару в пикселях,все нормально,а когда в % то фон исчезает?

 

 

Ну если без позиционирования, без таблиц, JavaScript'ов, то можно сделать что-то в этом духе: http://jsfiddle.net/ufFV6/2/, правда это не совсем гениальное и практичное решение.

Edited by Aleksandr.L
Link to comment
Share on other sites

  • 0
display: table-cell; дедовский способ? да вы шутите...

читайте внимательнее, не нужно все сообщение в одну кучу лепить. про дедовский способ было к этому куску

—————-

 

можно воспользоваться старым дедовским методом, задайте фон на оберточный блок #main-block. Можно вырезать однопиксельную репит полоску

 

 

Ну если без позиционирования, без таблиц, JavaScript'ов, то можно сделать что-то в этом духе: http://jsfiddle.net/ufFV6/2/, правда это не совсем гениальное и практичное решение.

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

Edited by Z1gnet
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

    • By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • By IT Курсы Avenue
      IT - Avenue – курсы программирования в аудиториях и онлайн.
      Реальный выпускной проект и подготовка к трудоустройству!
       
      Avenue – современный центр подготовки IT-специалистов. Наши курсы – настоящая пошаговая инструкция о том, как стать крутым IT-специалистом и зарабатывать в $!

       
      Направления:
      Программирование (Java, PHP, Python, Scala, C++, C#, Javascript)
      Веб-разработка
      Разработка игр на Unreal Engine
      Мобильная разработка: Android, iOS (Swift)
      Робототехника
      Blockchain
      Дизайн: графический и Web-дизайн
      Тестирование: Тестирование ПО и Автоматизированное тестирование
      Разработка сайтов: интернет-магазины, CMS Wordpress, HTML+CSS
      Маркетинг: SMM, Интернет-маркетинг, контекстная реклама
      IT и администрирование: проектный менеджмент, IT –рекрутинг
      Excel (Продвинутый уровень – работа с формулами)

       
      Почему именно IT Школа Avenue?
      Обучение на практике.
      Независимо от курса, мы обучаем студентов ТОЛЬКО на практике! Искренне верим в догму практического применения знаний и предпочитаем «закреплять на практике» все приобретённые навыки.
      Преподаватели – реальные айти-шники, маркетологи и менеджеры.
      Первое правило эффективного обучения – компетентный специалист. Мы не сотрудничаем с преподавателями ВУЗ-ов и со специалистами, чей суммарный опыт работы в IT менее 5-ти лет. Главная цель IT Avenue – подготовка квалифицированных кадров для IT-компаний, которые готовы к решению рабочих задач сразу после выпускного.
      Обучение «с нуля»
      Учебная программа (независимо от курса) рассчитана на новичков, которые хотят освоить профессию «с нуля». Совершенно не стоит переживать за уровень своих начальных знаний. Даже если вы никогда не открывали среду разработки – наши преподаватели помогут вам разобраться во всех тонкостях новой IT-профессии.
      Единственное обязательное условие – желание обучится чему-то новому!
      Онлайн сертификат и помощь в трудоустройстве.
      Абсолютно все студенты получают на руки сертификат фирменного образца и его онлайн-копию, которую можно прикрепить к своему резюме.
      После окончания курса каждый студент получит уникальную возможность пройти 2-х часовой Интенсив по трудоустройству, на котором опытный рекрутер расскажет об ошибках на первом собеседовании; о том, что такое Качественное резюме и об общих правилах собеседования в IT-компании.
      Реальный финальный проект
      Каждый курс предполагает создание Финального Проекта. Финальный проект – это программа, написанная на одном из языков программирования, созданный студентом сайт, дизайн интерфейса или маркетинговая стратегия продвижения. На последнем занятии студенты вместе с преподавателем регистрируются на сервисах создания онлайн-портфолио и размещают туда свой первый учебный проект, который будет свидетельствовать о профессиональной компетентности студента.
      С нами не будет легко
      Да, мы можем использовать маркетинговый ход и написать «Стать программистом за пару недель? Легко, вместе с нами!», но мы хотим быть честными со своими студентами!
      Стать программистом трудно, но возможно! Вам придется: много учится, добросовестно выполнять домашние задания и повторно обрабатывать материал дома. Следуя всем нашим инструкциям и заданиям, вы будете готовы к реальному трудоустройству на 100%!
      Формат и условия обучения:
      занятие 2 раза в неделю по 2 часа в вечернее время: с 19:30 до 21:30 (дни занятий определяет группа)
      возможны разные варианты оплаты: «Оплата одним платежом» и «Оплата частями»
      возможность использовать учебный ноутбук
      кофе-бар для студентов IT Avenue
      Контакты:
      наш телефон: 8 917 552 03 33
      наш сайт: it.avenue-pro.ru
    • By wavelolmu
      Всем привет!

      Мне нужно сделать горизонтальное меню посередине страницы. Я его сделал и через <ul>, при этом width 100% и margin 0, но почему-то слева возник отступ от края страницы. Градиент на заднем плане - это background-image, и там болжны быть белые отступы, потому что картинка такая, а отступ у меню быть не должен..
      Не подскажите, как это исправить?  Код и скриншоты прилагаю.
       
      <body> <div class="topnav"> <ul> <li ><a href="default.asp" id="first">Л1</a></li> <li><a href="news.asp" id="second">Ф2</a></li> <li><a href="contact.asp" id="third">С3</a></li> <li><a href="about.asp" id="fourth">О4</a></li> </ul> </div> </body> body { background-image: url("https://sun1-20.userapi.com/c830108/v830108125/1c35a9/gYiNRO0w7sw.jpg"); background-size: cover; } .topnav { margin: 0 auto; } ul { list-style-type: none; position: absolute; margin: 0 auto; margin-top:23.5%; padding: 0 ; overflow: hidden; height: 83px; width: 100%; } li { float: left; display: inline; } li a { display: block; text-align: center; padding: 24px 34px; }  

    • By GrowStay
      Здравствуйте, у меня такая проблема. Я хотел сделать скролируемое меню с ссылками на ресурс. Написал команду, и т.д. Выучил только теги html, к CSS (или как там) даже не прикасался. Так как сделать скролируемое меню с ссылками, если это вообще возможно. Объясните пожалуйста. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy