2017-12-02 202 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

哦,我做了最愚蠢的問題。很抱歉浪費你的時間。我感謝你的幫助。問題是身體崩潰了,我做了一個明確的測試頁腳:兩者都解決了問題。抱歉再次發佈這個愚蠢的東西。