2017-12-02 198 views
0

我的导航栏使用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>

+0

在片段中,所有内容都在正文中。当我将身体的背景颜色改为白色以外的东西时,我可以看到它一直延伸到文字的末尾。 [小提琴](https://jsfiddle.net/MrLister/smtkkt48/)。那么问题是什么?你能发表你看到的截图吗? –

回答

0

哦,我做了最愚蠢的问题。很抱歉浪费你的时间。我感谢你的帮助。问题是身体崩溃了,我做了一个明确的测试页脚:两者都解决了问题。抱歉再次发布这个愚蠢的东西。