Вёрстка на Bootstrap - SEO форум MaulTalk.com

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Вёрстка на Bootstrap

Опции

PaRtiZzaN_mw

Topic Starter сообщение

28.4.2016, 2:05; Ответить: PaRtiZzaN_mw

Сообщение #1

Новичок

Группа: User
Сообщений: 13
Регистрация: 28.4.2016
Поблагодарили: 0 раз
Репутация:

Всем привет. Помогите решить одну проблемку. Вот я пытаюсь сделать адаптивный дизайн для одной цмс при помощи bootstrap. Вроде всё получается, но вот никак не могу придумать как сделать что бы блок правого меню был всегда одной высоты с левым блоком контента, т.е. тянулся до футера?
Если нужны какие то файлы для разбора кода, пишите всё скину.

Эскизы прикрепленных изображений

Ответить с цитированием данного сообщения

BLIK BLIK 28.4.2016, 3:27; Сообщений: 4800 Поблагодарили: 77 раз Репутация: 1078 Просмотр профиля	28.4.2016, 3:27; Ответить: BLIK Сообщение #2
Топовый постер Группа: Super Moderator Сообщений: 4800 Регистрация: 19.10.2013 Поблагодарили: 77 раз Репутация: 1078	PaRtiZzaN_mw,Попробуй задать в стилях правому виджету/блоку height:100%

PaRtiZzaN_mw Topic Starter PaRtiZzaN_mwTopic Starter 28.4.2016, 8:06; Сообщений: 13 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 28.4.2016, 8:06; Ответить: PaRtiZzaN_mw Сообщение #3
Новичок Группа: User Сообщений: 13 Регистрация: 28.4.2016 Поблагодарили: 0 раз Репутация: 0	BLIK_mw, пробовал уже. Никаких изменений не происходит.

ShowPrint ShowPrint 28.4.2016, 13:08; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	28.4.2016, 13:08; Ответить: ShowPrint Сообщение #4
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	PaRtiZzaN_mw, может помочь "обертывание" двух блоков в один div, и возможно, чтоб работало height:100% надо будет подобрать правильное значение свойства display для правого блока.

yury_mw

30.4.2016, 12:17; Ответить: yury_mw

Сообщение #5

Завсегдатай

Группа: User
Сообщений: 648
Регистрация: 13.5.2009
Поблагодарили: 0 раз
Репутация:

195

(PaRtiZzaN @ 28.4.2016, 04:05)

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

Например, так:
(Суть метода: создать колонки очень большой высоты.
Для чего используются стилевые свойства
padding-bottom: 20000px;
margin-bottom: -20000px;
«Лишнее» же обрезается блоком-родителем с помошью overflow:hidden.)
Результат см по ссылке https://jsfiddle.net/g8gvv1h5/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
background:#c00;
color:#fff;
}
.parent{
overflow:hidden;
}

.content_wrap{
float: left;
width: 100%;
}
.content{
margin-right: 200px;
padding: 25px;
}
.right{
background:#000;
color:#fff;
float: left;
width: 200px;
padding-bottom: 20000px;
margin-bottom: -20000px;
white-space: pre-line;
}
.footer{
background:#000;
color:#fff;
}
</style>
</head>
<body>
<div class="header">
header
</div>

<div class="parent">
<div class="content_wrap">
<div class="content">
<h3>«Десять негритят»</h3>
<ol>
<li>Десять негритят отправились обедать, <br>Один поперхнулся, их осталось девять.</li>
<li>Девять негритят, поев, клевали носом, <br>Один не смог проснуться, их осталось восемь.</li>
<li>Восемь негритят в Девон ушли потом, <br>Один не возвратился, остались всемером.</li>
<li>Семь негритят дрова рубили вместе, <br>Зарубил один себя — и осталось шесть их.</li>
<li>Шесть негритят пошли на пасеку гулять, <br>Одного ужалил шмель, их осталось пять.</li>
<li>Пять негритят судейство учинили, <br>Засудили одного, осталось их четыре.</li>
<li>Четыре негритёнка пошли купаться в море, <br>Один попался на приманку, их осталось трое.</li>
<li>Трое негритят в зверинце оказались, <br>Одного схватил медведь, и вдвоём остались.</li>
<li>Двое негритят легли на солнцепёке, <br>Один сгорел — и вот один, несчастный, одинокий.</li>
<li>Последний негритёнок поглядел устало, <br>Он пошёл повесился, и никого не стало.</li>
</ol>
</div>
</div>
<div class="right">
Суть метода: создать колонки очень большой высоты.
Для чего используются стилевые свойства
padding-bottom: 20000px;
margin-bottom: -20000px;
«Лишнее» же обрезается блоком-родителем с помошью overflow:hidden.
</div>
</div>

<div class="footer">
footer
</div>
</body>
</html>

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

Сообщение отредактировал yury - 30.4.2016, 12:26

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ	0	bunneh	450	16.4.2024, 18:02 автор: bunneh
Вёрстка HTML-писем	30	Vampler	29394	27.3.2024, 12:41 автор: Vampler
Вёрстка лендинга + адаптивность Ищу исполнителя. Сверстать макет из PSD	4	zik	2193	2.8.2022, 16:56 автор: zik
Дизайн любой сложности и вёрстка под любую CMS	14	IT_alien	4524	15.2.2021, 18:16 автор: IT_alien
Дизайн любой сложности и вёрстка под любую CMS	0	IT_alien	1114	6.10.2020, 22:12 автор: IT_alien

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 23.4.2024, 19:09

Дизайн