なぜheight：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を作り、それがスペースを埋めるん。たぶん、あなたは他のいくつかのCSSをいじり

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; 
      } 
     } 
    } 
} 

を持っています。