Перейти к содержимому



Вёрстка на Bootstrap

#1 PaRtiZzaN

PaRtiZzaN
  • Пользователь
  • 3 сообщений
  • Репутация: 0
0

Отправлено 28 Апрель 2016 - 01:05

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

Если нужны какие то файлы для разбора кода, пишите всё скину.

Прикрепленные изображения

  • 3.png

 

 

  • 0

#2 BLIK

BLIK
  • Супермодератор
  • 3 199 сообщений
  • Репутация: 635

Отправлено 28 Апрель 2016 - 02:27

@PaRtiZzaN,Попробуй задать в стилях правому виджету/блоку  

height:100%

  • 0


#3 PaRtiZzaN

PaRtiZzaN
    Topic Starter
  • Пользователь
  • 3 сообщений
  • Репутация: 0

Отправлено 28 Апрель 2016 - 07:06

@BLIK, пробовал уже. Никаких изменений не происходит.


  • 0

#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 730 сообщений
  • Репутация: 410

Отправлено 28 Апрель 2016 - 12:08

@PaRtiZzaN, может помочь "обертывание" двух блоков в один div, и возможно, чтоб работало height:100% надо будет подобрать правильное значение свойства display для правого блока.


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 30 Апрель 2016 - 11:17

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


Например, так:

(Суть метода: создать колонки очень большой высоты.

Для чего используются стилевые свойства
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>

Сообщение отредактировал yury: 30 Апрель 2016 - 11:26

  • 1


Оформление форума – IPBSkins.ru