2

Здравствуйте. Есть три блока 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, а не меньше, это полотно идет ниже правого дива

3
  • height: 100%?
    – Sergey
    6 июл 2017 в 10:55
  • Покажите код и стили картинок
    – Cheg
    6 июл 2017 в 11:26
  • @Cheg обновил в коде 6 июл 2017 в 11:42

2 ответа 2

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>

3
  • 1
    Это все подходит спасибо большое! Но на одной странице у меня внутри дива rightcontent есть еще один див, прописанный обычным стилем <div style="padding: 10px; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; background:white"> и он вылезает из этого правого дива, если там много текста 6 июл 2017 в 11:02
  • @Валерий покажите пример кода
    – Cheg
    6 июл 2017 в 11:09
  • добавил код в вопросе 6 июл 2017 в 11:20
1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.