CSSで高さを理解する

Question

divの高さをコンテナの長さにしようとしています。今は、その中に入っている内容に合わせることしかできません。ここにそれを明確にするためのスクリーンショットがあります。

それはカットオフする方法を参照してください。私はそれをしたくありません、私はそれが含まれているサイズに動的に合うようにします。そのコンテンツはその場所にとどまるが、背景は下に伸びる。ここで

は私のマークアップです：ここでは

<div class="topic-body"> 
    <div class="topic-body__sidebar"> 
    <% Topic.all.each do |topic| %> 
     <%= link_to topic.name, topic_path(topic.slug) %> 
    <% end %> 
    </div> 

    <div class="topic-body__navigation"> 
    <% if current_user.admin? %> 
     <%= link_to "Add Navigation Item", new_topic_navigation_item_path(@topic.slug) %> 
    <% end %> 

    <% @topic.categories.each do |category| %> 
     <h3><%= category.name %></h3> 
     <div class="row"> 
     <% category.navigation_items.each do |navigation_item| %> 
      <a href="<%= navigation_item.url %>" class="item"> 
      <% if navigation_item.thumbnail %> 
       <%= image_tag(navigation_item.thumbnail.url, {class: "thumbnail"}) %> 
      <% else %> 
       <div class="stub thumbnail"></div> 
      <% end %> 
      <p><%= navigation_item.title %></p> 
      </a> 
     <% end %> 
     </div> 
    <% end %> 
    </div> 
</div> 

は、私は、関連する要素とそのパディングのすべてを見てしまう私のCSS

.topic-body { 
     width: 100%; 

     &__sidebar { 
     display: inline-grid; 
     width: 15%; 
     float: left; 
     padding-left: 20px; 
     padding-top: 30px; 
     font-size: 18px; 
     background-color: #F9F9F9; 

     a { 
      color: $table-text; 
      padding: 6px 0; 
     } 
     } 

     &__navigation { 
     width: 80%; 
     float: right; 
     } 
    } 

Answer 1

です。クロム・インスペクタの緑色の強調表示は、パディングを示しています。 padding: 0pxを設定した場合、要素はそのコンテナの高さ（および幅）に適合する必要があります。高さが必要な場合は、

.topic-body__sidebar { padding-top: 0px; }