Question

我的新主题。工作链接可在此处获得： http://colorfill.ionic.host/alpha/

正如您将看到的那样 - 徽标填充容器高度的100％（带填充）。然而第二个div（带菜单的那个）仍然存在问题。如何使它100％的高度？我尝试过身高：100％/ min身高：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>

Answer 1

将此添加到您的容器中：

display: flex;

如果您希望将导航垂直对齐在容器中居中，则可以添加：

align-items: center;

然后仅在导航上添加

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

编辑：

也是一个补充，可能会在导航中添加100％的宽度，因此flex-end实际上会弯曲到最后：）

Answer 2

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

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

在容器中使两个div等于高度（100％）

2 个答案: