Machen Sie zwei divs innerhalb Container gleichen Höhe (100%)

Question

im struggeling mit meinem neuen Thema. Arbeitslink ist hier verfügbar: http://colorfill.ionic.host/alpha/

wie Sie sehen werden - Logo füllt 100% (mit Polsterung) der Containerhöhe. Aber es gibt immer noch Probleme mit der zweiten Div (die mit Menü). Wie man es 100% der Höhe auch macht? Ich habe es mit der Höhe versucht: 100%/min-Höhe: 100% aber ohne Erfolg. Für mich ist das richtige Layout, wenn der Menürand (unten) den unteren Teil des Containers treffen wird (und nicht wie derzeit = Mitte).

Dies ist der gesamte HTML-Code:

<div class="container"> 
         <div class="header-bottom-left-section"> 
          <div class="site-identity-container"> 
      <div class="logo-container"> 
      <a href="http://colorfill.ionic.host/alpha/" class="custom-logo-link" rel="home" itemprop="url"><img width="221" height="100" src="http://colorfill.ionic.host/alpha/wp-content/uploads/2017/08/cropped-vetsandpets-logo.png" class="custom-logo" alt="Vets &amp; Pets – Gabinet weterynaryjny" itemprop="logo"></a>  </div> <!-- .logo-container --> 

     <div class="site-branding"> 
        <p class="site-title"><a href="http://colorfill.ionic.host/alpha/" rel="home">Vets &amp; Pets – Gabinet weterynaryjny</a></p> 
        <p class="site-description">Jeden gabinet weterynaryjny dla wielu potrzeb pupila</p> 
      </div><!-- .site-branding --> 
</div> <!-- .logo --> 
                </div> 

         <div class="header-bottom-right-section"> 
           <nav id="site-navigation" class="main-navigation navigation-default navigation-offcanvas--left menu-has-submenu-shadow menu-has-submenu-devider menu-has-submenu-indicator" role="navigation" style="height: auto;"> 
     <header class="nav-header"> 
      <h3 class="nav-title">Vets &amp; Pets – Gabinet weterynaryjny</h3> 
      <a href="#" class="nav-close">close</a> 
     </header> 

     <div class="menu-primary"><ul id="menu-primary-menu" class="primary-menu"><li id="menu-item-2512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-300 current_page_item menu-item-2512"><a href="http://colorfill.ionic.host/alpha/">Strona Główna</a></li> 
<li id="menu-item-2511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2511"><a href="http://colorfill.ionic.host/alpha/blog/">Blog</a></li> 
<li id="menu-item-2505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2505"><a href="http://colorfill.ionic.host/alpha/uslugi-weterynaryjne/">Usługi weterynaryjne</a></li> 
<li id="menu-item-2506" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2506"><a href="http://colorfill.ionic.host/alpha/o-nas/">O nas</a> 
<ul class="sub-menu"> 
    <li id="menu-item-2507" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2507"><a href="http://colorfill.ionic.host/alpha/o-nas/platnosci/">Płatności</a></li> 
    <li id="menu-item-2508" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2508"><a href="http://colorfill.ionic.host/alpha/o-nas/nasi-partnerzy/">Nasi partnerzy</a></li> 
    <li id="menu-item-2509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2509"><a href="http://colorfill.ionic.host/alpha/o-nas/dodaj-opinie/">Dodaj swoją opinię</a></li> 
</ul> 
</li> 
<li id="menu-item-2504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2504"><a href="http://colorfill.ionic.host/alpha/galeria/">Galeria</a></li> 
<li id="menu-item-2503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2503"><a href="http://colorfill.ionic.host/alpha/kontakt/">Kontakt</a></li> 
</ul></div> </nav><!-- #site-navigation --> 

<div class="header-action-container"> 
       <ul class="navigation-header-action"> 
          <li class="header-action-item-search search-form-style-dropdown"> 
        <span class="screen-reader-text">Show Search Form</span> 
        <i class="fa fa-search"></i> 
              <div class="header-action-search-form"> 
          <form role="search" method="get" class="search-form" action="http://colorfill.ionic.host/alpha/"> 
       <label> 
        <span class="screen-reader-text">Szukaj:</span> 
        <input type="search" class="search-field" placeholder="Szukaj …" value="" name="s"> 
       </label> 
       <input type="submit" class="search-submit" value="Szukaj"> 
      </form>      </div> 
            </li> 

        </ul> 

    <div class="navigation-togglers-wrapper"> 
     <button class="menu-toggle menu-toggle-mobile" aria-controls="primary-menu" aria-expanded="false"><span class="screen-reader-text">Primary Menu for Mobile</span> <i class="fa fa-bars"></i></button> 
     <button class="menu-toggle menu-toggle-desktop menu-toggle-navigation-default" aria-controls="primary-menu" aria-expanded="false"><span class="screen-reader-text">Primary Menu for Desktop</span> <i class="fa"></i></button> 
    </div> <!-- .navigation-togglers-wrapper --> 
</div> <!-- .header-action-container --> 
         </div> 
        </div> 

Answer 1

versuchen, eine bestimmte Höhe zu .menu-primary einstellen und setzen Sie die Höhe der inneren ul, li und a Tags auf 100%, wie unten gezeigt.

.menu-primary { 
    height: 134px; 
} 
.menu-primary ul, 
.menu-primary li, 
.menu-primary a { 
    height: 100%; 
} 

Answer 2

diese in Ihre Container:

display: flex; 

Wenn Sie die Navigation vertikal in dem Behälter zentriert ausgerichtet halten möchten, können Sie hinzufügen :

align-items: center; 

dann auf der Navigations nur, fügen

justify-content: flex-end; 
display: flex; 

EDIT:

auch eine Ergänzung, vielleicht eine Breite von 100% zur Navigation hinzufügen, so dass das Flex-Ende bis zum Ende tatsächlich verbiegt :)