1
新しいポートフォリオのWebサイトには、私の名前、メインナビゲーション、ソーシャルメニューのヘッダーが必要です。だから私は33％の幅を持つ3つのdivでヘッダーを作った。私の問題は、ポジションを置くとすぐに、ヘッダーが完全なものを超えて拡大し続けることです。これは、パディングやマージンを適用した場合に限られていますので、問題になるかもしれませんが、私はこの問題をどのように修正して、何時間も夢中になってしまいました。 多分あなたの何人かが助けることができるかもしれませんか？ありがとう！ヘッダーがブラウザのウィンドウを超えて拡大し続ける
<!DOCTYPE html>
<html lang="en" class="no-js">
<body>
<div class="container">
<div class="header">
<div class="site-title">
Hello World
</div>
<div class="main-menu">
<ul class="main-menu">
<a href="work.html"><li>Work</li></a>
<a href=""><li>Curriculum</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</div>
<div class="social-menu">
<ul class="social-menu">
<a href="#"><li class="fa fa-envelope"></li></a>
<a href="#"><li class="fa fa-twitter"></li></a>
<a href="#"><li class="fa fa-dribbble"></li></a>
<a href="#"><li class="fa fa-youtube-play"></li></a>
<a href="#"><li class="fa fa-500px"></li></a>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</body>
</html>
*{
margin: 0em;
padding: 0em;
border: 0em;
text-decoration: none;
list-style: none;
color: #333;
}
html{
width: 100%;
height: 100%;
position: relative;
}
body{
width: 100%;
height: 100%;
position: relative;
}
container{
margin: 3em;
overflow: auto;
}
.content{
height: 2000px;
}
.container:before,
.container:after {
content : "";
display : table;
}
.container:after {
clear : both;
}
.header{
width: 100%;
position: fixed;
z-index: 100;
margin: 3em;
background-color: burlywood;
}
.site-title{
float:left;
display: inline-block;
width: calc(100%/3);
position: relative;
background-color: beige;
}
div.main-menu{
margin:0 auto;
display: inline-block;
width: calc(100%/3);
text-align: center;
background-color: cadetblue;
}
.main-menu a{
display: inline-block;
}
div.social-menu{
float: right;
width: calc(100%/3);
display: inline-block;
text-align: right;
}
フレキシボックスは、（それが余裕の問題だ）適切に質問に答えていません。 –