Как установить дочерний div на родительскую высоту (100%)?

Это они макет страницы enter image description here Вот код для этогоКак установить дочерний div на родительскую высоту (100%)?

<div class="newsContent row"> 
    <div class="newsDate col-md-2">05 August 2014</div> 
    <div class="newsSeparator col-md-1"> 
    </div> 
    <div class="newsDescription col-md-7"> 
     <div class="row"> 
      some dummy news 
      <div class="newsImage"><img alt="news2" src="/Images/News/news2.jpg"> 
      </div> 
     </div> 
    </div> 
    <div class="newsActions col-md-2"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <button type="button" class="btn btn-default btn-lg edit-content" title="Edit the news" <span class="glyphicon glyphicon-pencil"> 
        </span> 
       </button> 
      </div> 
      <div class="col-md-4"> 
       <button type="button" class="btn btn-default btn-lg delete-content" title="Delete the news"> 
        <span class="glyphicon glyphicon-trash"></span> 
       </button> 
      </div> 
     </div> 

    </div> 
</div>

Теперь, как вы можете видеть, эта зеленая линия эта часть

<div class="newsSeparator col-md-1"> 
</div>

и класс

.newsSeparator 
{ 
    background: url('my_1X1_pixel_image.png'); 
    background-repeat: repeat-y; 
}

Но это не повторяется. Я просто вижу 1px изображение вместо этой желаемой зеленой линии. Что-то вроде этого.

enter image description here

Почему не повторяя у, после того, как я установил background-repeat: repeat-y;. Как сделать это как желаемую строку, повторяющуюся вдоль y, и растянуть/размер соответственно в соответствии с родительским div и новостным контентом?

EDIT Это не дубликат that. У меня есть фоновое изображение, которое мне нужно повторить вдоль оси y.

источник

2015-02-20 Razort4x

возможно дубликат [CSS - расширение высоты ребенка DIV до высоты родителя] (http://stackoverflow.com/questions/4804581/css-expand-child-div-height -to-parents-height) –

оберните описание новости и изображение новостей в тег 'article' и назначьте« border-left »новому вставленному элементу. Вы избежите пустой разметки только для целей стилизации, и вы немного улучшите свою семантику. – fcalderan

не могли бы вы предоставить скрипку? –

Вы можете обернуть описание новостей и изображения в единый элемент <article>

Затем вы можете назначить border-left на новый вставляемый элемент. При этом вы избегаете использовать пустую разметку только для целей стилизации, а также улучшите семантику страницы.

<article> 
    <div class="newsDescription col-md-7"> 
     <div class="row"> 
      ... 
     </div> 
    </div> 
    <div class="newsActions col-md-2"> 
     <div class="row"> 
      ... 
     </div> 
    </div> 
</article>

CSS

article { 
    border-left: 1px green solid; 
    padding-left: ... /* give some space between border and contents */ 
}

источник

2015-02-20 12:44:45 fcalderan

Вы можете установить height: inherit, чтобы установить высоту дочернего div так же, как родительский div.

источник

2015-02-20 12:11:50

Нет, я сделал это, он не работает! Вы можете попробовать это самостоятельно в jsfiddle. – Razort4x

Как установить дочерний div на родительскую высоту (100%)?

ответ

Смежные вопросы