让容器内的两个div等高（100％）

即时通过我的新主题进行构造。工作链接可在此处获得： http://colorfill.ionic.host/alpha/让容器内的两个div等高（100％）

正如您将看到的 - 徽标填充容器高度的100％（填充）。然而，第二个div（带菜单的）仍然存在问题。如何使它达到100％的高度？我试过身高：100％/分钟身高：100％，但没有成功。对于我来说，如果菜单边界（底部的）与容器的底部相遇（并且不是当前=中间的部分），那么正确的布局将会是。

这是整个的html代码：

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

来源

2017-08-14 Paweł Skaba

请显示CSS。 – Sand

试图将一个特定的高度设置为.menu-primary并将内部ul,li和a标签的高度设置为100％，如下所示。

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

来源

2017-08-14 10:55:44 kmg

添加到您的容器：

display: flex;

如果你想保持垂直排列在容器中心的导航，你可以添加：

align-items: center;

然后在导航只，加

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

编辑：

也是另外，可能100％的宽度增加了导航这样的柔性最后居然弯曲到底:)

来源

2017-08-14 10:54:44 Amy

让容器内的两个div等高（100％）

回答

相关问题