Header 身高不明

Question

我不知道为什么，但是我的 h3 似乎有很大的高度，我在页面下方有第二个 h3，无论我设置什么边距或填充，它根本没有这个问题对于h3的顶部，它总是在图片背景上方的某处，导航在哪里？

HTML

<header>
<div class="fixed">
    <h1>Title</h1>
    <nav id="menu">
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="work/index.html">Portfolio</a></li>
            <li><a href="travel/index.html">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
 </div>

    <div class="picture">
        <h2>Text</h2>
        <h2 class="name">Betti</h2>
    </div>
</header>

<main>

    <h3>Website Project</h3>
    <p>coded in HTML &amp; CSS</p>

    <div class="project">
      <a href="../project1/index.html" target="_blank">   
      <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a>
    </div>

CSS

.fixed{
position: fixed;
background-color: white;
top: 0px;
left: 0px;
width: 100%;
border-bottom: dashed;
border-color: #666666;
}

.picture{
background: url("../img/london.jpg") no-repeat;
background-size: 100%;
margin-top: 0%;
width: 100%;
float: left;
border-left: solid #a5053d;
border-width: 15px;
}

 h1{
padding: 1% 0 0 4%;
text-transform: uppercase;
float: left;
left: 0;
}

 h2{
padding: 0 4%;
color: white;
float: left;
margin-top: 3%;
}

h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
margin-bottom: -20px; 
margin-top: 0;
}

#project1, #project2{
margin-top: 0px;
margin-left: 20%;
margin-right: auto;
width: 60%;
text-align: center;
border: 1.9px solid #a5053d;
margin-bottom: 4%;
}

.project{
clear: both;
float: none;
overflow: none;
position: center;
width: 100%;
}

Answer 1

您刚刚看到 space main 正在占用。它消耗了所有 space，因为它之前的元素 header 已经浮动 children 并且 header 没有 clearfix。所以 main 技术上从 header 结束的地方开始，但在 header.

中低于 children

您可以通过清除 header 中的浮点数来解决这个问题，这样 main 就不会显得那么高，实际上会从 header 结束的地方开始。我将 overflow: auto; 添加到 header 但还有其他方法也可以清除浮动。 http://codepen.io/anon/pen/EZbmKV

header {
  overflow: auto;
}

.fixed{
position: fixed;
background-color: white;
top: 0px;
left: 0px;
width: 100%;
border-bottom: dashed;
border-color: #666666;
}

.picture{
background: url("../img/london.jpg") no-repeat;
background-size: 100%;
margin-top: 0%;
width: 100%;
float: left;
border-left: solid #a5053d;
border-width: 15px;
}

 h1{
padding: 1% 0 0 4%;
text-transform: uppercase;
float: left;
left: 0;
}

 h2{
padding: 0 4%;
color: white;
float: left;
margin-top: 3%;
}

h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
margin-bottom: -20px; 
margin-top: 0;
}

#project1, #project2{
margin-top: 0px;
margin-left: 20%;
margin-right: auto;
width: 60%;
text-align: center;
border: 1.9px solid #a5053d;
margin-bottom: 4%;
}

.project{
clear: both;
float: none;
overflow: none;
position: center;
width: 100%;
}

<header>
<div class="fixed">
    <h1>Title</h1>
    <nav id="menu">
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="work/index.html">Portfolio</a></li>
            <li><a href="travel/index.html">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
 </div>

    <div class="picture">
        <h2>Text</h2>
        <h2 class="name">Betti</h2>
    </div>
</header>

<main>

    <h3>Website Project</h3>
    <p>coded in HTML &amp; CSS</p>

    <div class="project">
      <a href="../project1/index.html" target="_blank">   
      <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a>
    </div>

Header 身高不明

Header has unexplainable height

html

css

height

header