html - 为什么高度为: auto not provide content area large enough to fit my content?

Question

当用户注销时，页眉显示 Logo 和登录表单，页眉需要足够大才能容纳。当用户登录时，他们会在不再需要那么大的标题上看到完整的导航。我认为将 height:auto 设置为“site-header”可以完成此操作，但这只会使表单 float 在标题的底部边框上。

html:

<header>
  <div class="site-header">
      <%= link_to full_title(yield(:title)), root_path, class: "logo" %>
      <nav>
      <% if user_signed_in? %>
        <%= link_to "Sell", new_item_path %>
        <%= link_to "FAQ", pages_faq_path %>
        <%= link_to "Settings", edit_user_registration_path %>
        <%= link_to "Log out", destroy_user_session_path %>
      <% end %>
    </nav>
    <div class="log-in">
      <% if !user_signed_in? %>
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="form">
            <%= f.label :email %><br />
            <%= f.email_field :email, autofocus: true, class: 'peach' %>
          </div>
          <div class="form">
            <%= f.label :password %><br />
            <%= f.password_field :password, autocomplete: "off", class: 'peach' %>
            <%= f.submit "LOG IN", class: 'button-functional' %><br>
            <%= render "devise/shared/forgotpass" %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</header>

CSS:

header {
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    border-bottom: 1px dashed black;
    .site-header {
        margin: 0 2em;
        padding: 1em 0;
        height: auto;
        nav {
            float: right;
            a {
                margin-right: 2em;
            }
            a:last-child {
                margin-right: 0;
            }
        }
        .log-in {
            float: right;
            .form {
                float: left;
            }
            input {
                margin-right: 1em;
            }
        }
    }
}

Answer 1

我用你的例子做了一个 Plunker，它确实填满了空间。

https://plnkr.co/edit/QMiHzA89NZrDkpsrCefF

HTML

<header>
  <div class="site-header">
      <%= link_to full_title(yield(:title)), root_path, class: "logo" %>
      <nav>
      <% if user_signed_in? %>
        <%= link_to "Sell", new_item_path %>
        <%= link_to "FAQ", pages_faq_path %>
        <%= link_to "Settings", edit_user_registration_path %>
        <%= link_to "Log out", destroy_user_session_path %>
      <% end %>
    </nav>
    <div class="log-in">
      <% if !user_signed_in? %>
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="form">
            <%= f.label :email %><br />
            <%= f.email_field :email, autofocus: true, class: 'peach' %>
          </div>
          <div class="form">
            <%= f.label :password %><br />
            <%= f.password_field :password, autocomplete: "off", class: 'peach' %>
            <%= f.submit "LOG IN", class: 'button-functional' %><br>
            <%= render "devise/shared/forgotpass" %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</header>

CSS

header {
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    border-bottom: 1px dashed black;
    .site-header {
        margin: 0 2em;
        padding: 1em 0;
        height: auto;
        nav {
            float: right;
            a {
                margin-right: 2em;
            }
            a:last-child {
                margin-right: 0;
            }
        }
        .log-in {
            float: right;
            .form {
                float: left;
            }
            input {
                margin-right: 1em;
            }
        }
    }
}

也许你有一些其他的 CSS 乱七八糟。