流体左揃えと右揃え要素の折り返しを持つヘッダとフルハイト

Question

を埋め、私は次のようなHTMLがあります。

<header> 
 
    <h1>Curriculum Vitae</h1> 
 
    <ul id="profile-menu"> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li>Contact</li> 
 
    </ul> 
 
</header>

そして次SASS：

header { 
 
    background-color: white; 
 
} 
 
header h1 { 
 
    margin: 1em; 
 
    display: inline-block; 
 
} 
 
header ul#profile-menu { 
 
    margin: 1em; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
header ul#profile-menu li { 
 
    display: inline; 
 
}

を

これは、大画面上で、次のようにレンダリング：ul#profile-menuは、次の行に折り返されるように

は、しかし、私は、ヘッダー流体をしようとしています、とヘッダはの高さに対応するために成長しますどちらも。しかし、現在はラッピングしていますが、左揃えではなく、ヘッダーが高さを満たしていません。

私はメディアクエリのない方法がありますかどうかを知るために、100％の高さを充填しながらちょうどそれが液体のように包んでいるのが大好きです。

Answer 1

フレックスボックスでも可能です。

Codepen Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
header { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    background: lightblue; 
 
} 
 
h1 { 
 
    flex: 1; 
 
    white-space: nowrap; 
 
} 
 
ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    align-items: center; 
 
    white-space: nowrap; 
 
} 
 
li { 
 
    padding-right: 1em; 
 
}

<header> 
 
    <h1>Curriculum Vitae</h1> 
 
    <ul id="profile-menu"> 
 
    <li>Home</li> 
 
    <li>About</li> 
 
    <li>Contact</li> 
 
    </ul> 
 
</header>