1

Есть вот такая html структура: https://jsfiddle.net/swux2h3q/

#foo {
  position: relative;
  border: 1px solid green;
}
#foo > div {
  position: relative;
  display: inline-block;
}
#left {
  width: 30%;
  background: white;
  float: left;
  box-shadow: 1.5px 1.9px 0 red;
}
#right {
  width: 70%;
}
<div id="foo">
  <div id="left">
    <div id="new">
      <p>Text</p>
    </div>
  </div>
  <div id="right">
    <div>
      <p>Text</p>
    </div>
    <div>
      <p>Text</p>
    </div>
    <div>
      <p>Text</p>
    </div>
  </div>
</div>

Количество элементов в div#right, а соотв. и высота div#right могут динамически меняться. Как сделать, что бы div#left растягивался по высоте и занимал всю высоту родителя? т.е. что бы высота фона div#left всегда соответствовала высоте div#right.

При этом, у div#left должна оставаться тень внизу и справа. Интересно решение на CSS, без применения JS.

5
  • У родителя задайте background и у right.
    – Visman
    4 сен 2016 в 8:52
  • Спасибо за ответ. Но к сожалению такой вариант не подходит(. Т.к. у left должна оставаться тень справа и снизу.
    – volle241
    4 сен 2016 в 8:57
  • На CSS - подозреваю, что через flexbox и, возможно, табличной версткой 4 сен 2016 в 9:02
  • Спасибо Виталий. Но, от табличной верстки как раз ухожу. А flex не поддерживается IEшками 9-. А это критично, в моей ситуации(
    – volle241
    4 сен 2016 в 9:14
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 5 сен 2016 в 5:21

2 ответа 2

2

Как вариант использовать display: table, поддержка браузерами по ИЕ8 включительно

#foo {
  position: relative;
  border: 1px solid green;
  display: table;
  width: 100%;
}

#foo > div {
  position: relative;
  display: table-cell;
  vertical-align: top;
}

#left {
  width: 30%;
  background: white;  
  box-shadow: 1.5px 1.9px 0 red;  
}

#right {
  width: 70%;
}
<div id="foo">
    <div id="left">
      <div id="new">
        <p>Text</p>
      </div>
    </div>
    <div id="right">
    <div><p>Text</p></div>
    <div><p>Text</p></div>    
    <div><p>Text</p></div>
    </div>
</div>

Вариант 2

#foo {
  position: relative;
  border: 1px solid green;
  background: white;
  position: relative;
}
#foo:after{
  content: '';
  position: absolute; top: 0; left: 0;
  width: 30%;
  height: 100%;
  box-shadow: 1.5px 1.9px 0 red;
}

#foo > div {
  position: relative;
  display: inline-block;
}
#left {
  width: 30%;  
  float: left;  
}
#right {
  width: 70%;  
}
<div id="foo">
    <div id="left">
      <div id="new">
        <p>Text</p>
      </div>
    </div>
    <div id="right">
    <div><p>Text</p></div>
    <div><p>Text</p></div>    
    <div><p>Text</p></div>
    </div>
</div>

0

Только имитация,прячем не соответствие за background

* {
  margin: 0;
  padding: 0;
}
div {
  display: block;
}
.clear,
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.a {
  width: 100%;
  background: ;
  border: 1px solid;
  box-sizing: border-box;
  background: blue;
}
.b,
.c {
  float: left;
  box-sizing: border-box;
  padding: 10px 0;
}
.b {
  width: 30%;
  height: 100%;
  border-right: 4px solid #fff;
  margin-right: -1px;
}
.c {
  width: 70%;
  background: blue;
  border-left: 4px solid #fefefe;
  margin-left: -3px;
}
/*типа контент*/

.d {
  min-height: 100px;
}
.e {
  width: 100%;
  min-height: 100px;
}
p {
  width: 90%;
  margin: 20px auto;
  font-size: 18px;
}
.e p {
  color: #000;
}
.d p {
  color: #fff;
}
<div class="a clear">
  <div class="b">
    <div class="e">
      <p>Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta.</p>
    </div>
  </div>
  <div class="c">
    <div class="d">
      <p>Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec
        rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>
      <p>Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat.
        Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
      <p>Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna
        dictum porta.</p>
      <p>Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur
        sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras
        ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta.</p>
    </div>
  </div>
</div>

http://codepen.io/Geyan/pen/pEvJQm?editors=0100

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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