我的导航栏使用position: sticky
,但是因为主体比视频没有走得更远。其他元素是浮动的,但是它们不知何故不会进入体内。
当我使用包装器时,所有代码都在主体中,但是导航栏不再发粘。我尝试了自动溢出功能,但全部无效。这是我的代码:
body {
background-image: url(bf1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
font-family: roboto, sans-serif;
}
header img {
margin: auto;
width: 30vw;
height: 10vh;
display: block;
}
header {
margin: 0;
clear: both;
}
nav {
width: 100%;
height: 8vh;
background-color: black;
margin: 0;
position: sticky;
top: 0;
clear: both;
}
nav ul {
margin: 0;
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
margin: 2vh 2vw 0px 2vw;
}
nav a {
color: white;
font-size: 1.25em;
text-decoration: none;
}
nav a:hover {
color: #FF5D09;
}
#huidig {
color: #FF5D09;
}
#trailer {
width: 100%;
margin: 1% 0%;
clear: both;
}
#trailer iframe {
width: 50vw;
height: 60vh;
margin: 0 auto;
display: block;
border: solid black 4px;
}
article {
color: white;
height: auto;
width: 70vw;
float: left;
font-size: 110%;
text-align: center;
}
<header> <img src="header.png" /> </header>
<nav>
<ul>
<li><a id="huidig" href="home.html">Home</a></li>
<li><a href="they shall not pass.html">They Shall Not Pass</a></li>
<li><a href="in the name of the tsar.html">In the Name of the Tsar</a></li>
<li><a href="community.html">Community</a></li>
</ul>
</nav>
<div id="trailer">
<iframe src="https://www.youtube.com/embed/zOKZtgsUCtc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<article>
<div id="Intro">
<h2> Introductie</h2>
<p>Battlefield 1 is een first person shooter ontwikkeld door EA DICE. Ondanks de 1 is het de 15e game in de series. In tegenstelling tot de voorganger speelt Battlefield 1 zich af in de 1e wereldoorlog. Wat Battlefield 1 (eigenlijk de hele Serie) nou
bijzonder maakt, in vergelijking met de competitie, is het feit dat het voertuigen bevat die spelers zelf kunnen besturen. Verder bevat het spel veel grotere maps dan de concurrenten.
</p>
</div>
<img src="pic1home.jpg" />
<div id="Singleplayer">
<h2>Singleplayer</h2>
<p>Voor Battlefield 1 heeft de developer gekozen voor een andere soort storyline dan ze altijd hebben gedaan. In de vorige titels waren het altijd opeenvolgende missies die je moest doen. Het perspectief was altijd vanuit één persoon en het was een tradionele
singleplayer, zoals de andere shooters. Bij Battlefield 1 hebben ze nu war stories. In plaats van een reeks missies, speel je nu als het ware meerdere kleine singleplayers. Je kunt het zien als hoofstukken, elk hoofstuk heeft een paar missies die
het verhaal van de hoofdpersonage vertellen. Je speelt daardoor ook niet als één persoon, maar als meerdere tijdens de eerste wereldoorlog.
</p>
<table>
<tr>
<th>War Story</th>
<th>Hoofdpersonage</th>
<th>Thema</th>
</tr>
<tr>
<td>Through Mud and Blood</td>
<td>Daniel Edwards</td>
<td>Mark V tank</td>
</tr>
<tr>
<td>Friends in high places</td>
<td>Clyde Blackburn</td>
<td>Luchtgevechten </td>
</tr>
<tr>
<td>Avanti Savoia</td>
<td>Luca Vincenzo</td>
<td>zoektocht</td>
</tr>
<tr>
<td>The Runner</td>
<td>Frederick Bishop</td>
<td>vriendschap <br/>opoffering </td>
</tr>
<tr>
<td>Nothing is Written</td>
<td>Zara Ghufran</td>
<td>Pantsertrein <br/> vrijheid</td>
</tr>
</table>
</div>
<div id="multiplayer">
<h2>Multiplayer</h2>
<p>De multiplayer van Battlefield 1 is voor veel mensen de reden om het spel te kopen. Het bevat voertuigen zoals tanks, vliegtuigen en boten en gedetailleerde omgevingen. Elk voertuig heeft 3 variaties die je kunt kopen. Elke variate geeft het voertuig
andere wapens, zodat het meer anti-tank focussed is of juist goed for infanterie. Een nieuw gameplay element in Battlefield 1 is de behemoth. Als een team dreigth te verliezen met een groot verschil krijgt het toegang tot een speciaal voertuig om
een comeback te maken. Het voertuig verschilt per map en kan een armored train zijn, maar ook een enorme zeppelin.</p>
</div>
</article>
<div id="sidenav">
<ul>
<li><a href="#Intro">Introductie</a></li>
<li><a href="#Singleplayer">singleplayer</a></li>
</ul>
</div>
最佳答案
哦,我提出了最愚蠢的问题。抱歉浪费您的时间。我感谢您的帮助。问题是身体崩溃了,我用clear:b做了一个测试页脚,并解决了这个问题。再次抱歉发布了这个愚蠢的内容。