Html 用CSS理解高度

我试着把一个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>

---

我将查看所有相关元素及其填充。chrome inspector的绿色高亮显示表示填充。如果设置了

填充：0px

，则元素应适合其容器的高度（和宽度）。如果只需要高度，请设置

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

---

看看flexbox。为什么你们有左填充和顶部填充？绿色的部分是填充物填充物只是用于样式而已。你是说把填充物去掉吗？

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