Растянуть div на всю высоту родительского div

496

08 июля 2017, 07:38

Здравствуйте. Есть три блока Div. Один родительский, второй внутри слева (для меню), второй внутри справа (для текста). Как можно растянуть правый внутренний блок (можно с левым) на всю высоту родительского блока. Сам родительский блок с фиксированной высотой не менее 1100px

Вот код:

<div id="wrapctr">
<div id="leftmenu"></div>
<div class="rightcontent"></div>
</div>

Вот что прописано в css:

    #wrapctr {
          width:80%;
          min-width: 700px;
          max-width: 1200px;
          background:#FFF;
          margin:0 auto;
          min-height:1100px;
          z-index:2;        
        }
    #leftmenu { 
      background: #FFF;
      float: left;
      width: 250px;
      list-style: none;
     }
.rightcontent {
      background: #FFF; 
      margin-left: 255px; 
     }

UPD: На одной странице выдаются фотографии 12 штук по три в ряд, и страница имеет такой вид

<div id="wrapctr">
<div id="leftmenu"></div>
<div class="rightcontent">
//общий див
<div style="padding: 10px; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; background:white">
// на каждую картинку
<div style="float: left; padding: 10px; text-align: center; width: 257px;"><img src="../img/1625.jpg" width="200"></div>
</div>
</div>
</div>

И если на странице фотографий ровно 12, а не меньше, это полотно идет ниже правого дива

Answer 1

html, 
body { 
  padding: 0px; 
  margin: 0px; 
} 
 
#wrapctr { 
  width: 80%; 
  min-width: 700px; 
  max-width: 1200px; 
  background: #FFF; 
  margin: 0 auto; 
  min-height: 1100px; 
  position: relative; 
  z-index: 2; 
} 
 
#leftmenu { 
  background: #f00; 
  width: 250px; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  height: 100%; 
  list-style: none; 
} 
 
.rightcontent { 
  background: #000; 
  position: absolute; 
  height: 100%; 
  left: 255px; 
  top: 0px; 
  right: 0px; 
  bottom: 0px; 
}

<div id="wrapctr"> 
  <div id="leftmenu"></div> 
  <div class="rightcontent"></div> 
</div>

Answer 2

html, 
body { 
  padding: 0px; 
  margin: 0px; 
} 
 
#wrapctr { 
  width: 80%; 
  min-width: 700px; 
  max-width: 1200px; 
  background: #FFF; 
  margin: 0 auto; 
  min-height: 1100px; 
  height: 0px; /* просто чтобы был */ 
} 
 
#leftmenu { 
  background: #f00; 
  width: 250px; 
  height: 100%; 
  float: left; 
} 
 
.rightcontent { 
  background: #000; 
  height: 100%; 
}

<div id="wrapctr"> 
  <div id="leftmenu"></div> 
  <div class="rightcontent"></div> 
</div>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

height 100vh и лишние пиксели

При использовании height:100vh; выдает какую-то лишнюю высотудаже box-sizing:border-box; не помогает

308

Как организовать импорт макросов в Excel на C#

В институте на производственной практике дали задание - написать своего рода инсталлятор с опциями импорта-экспорта макросов в ExcelСделал...

551

При использовании INSERT в базу проекта ничего не добавляется (ADO .NET)

Есть строка подключения сгенерированная при создании подключения базы данных из проектаДля отображения использую DataGridView(WinForms)

249

Вызов и подключение программы на c++ из c#

Есть программа на c++, которая генерирует зашифрованное сообщение и выводит в файл и консольПрограмма на c# должна эти данные выводить на winforms

574