爲什麼高度：auto不提供足夠大的內容以適合我的內容？

Question

當用戶註銷時，標題會顯示徽標和登錄表單，表頭需要足夠大才能容納。當用戶登錄時，他們會看到不再需要非常大的標題上的完整導航。我認爲將height:auto設置爲「site-header」會實現這一點，但這只是使表單漂浮在標題的底部邊界上。

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瞎搞。