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

我会查看所有相关元素及其填充。 chrome检查器的绿色高亮显示填充。如果设置padding: 0px，则元素应该适合其容器的高度（和宽度）。如果你想要高度，请设置

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

用CSS理解高度

1 个答案: