Html 全屏文章

我正在做一个移动应用程序。文章只放了一个自动边距的权重，并留下了同样高度的文字

此外，我的图片不会全屏显示。我还需要它自动改变，当你打开它在智能手机或电脑上。我找不到我做错了什么

一切都站在同一张地图上，地图上的所有单词都是正确的

<!DOCTYPE css> 

#top {
font-family: "Century Gothic", arial; 
font-size: 12pt;

margin: 0; 
padding: 0; 
overflow: auto;

background-color: black;
}

article {
opacity: 0.9;

border: 1px solid black;

background-image: url("slide.jpg"); 
background-repeat: no-repeat;
background-size: auto;

margin-top: 1em; 
margin-bottom: 1em;

padding-left: 0.5em; 
padding-right: 0.5em; 
padding-top: 7%; 
padding-bottom: 30em;
color: black; 


margin: auto; 
}

<article id = "Staande" class = "staande_houding">
              <!---  <img src = "hoi.jpg" id = "hoi" /> -->
        <h1> Staande houding </h1>
        <div class = "beschrijving" id = "Loodlijn"> <h3> Loodlijn </h3>

De patiënt staat .... voor of achter de optimale loodlijn. Er is een .... asymmetrie tussen de    twee zijden van het lichaam en er is een .... disbalans tussen de agonisten en antagonisten van de voor- en of achterzijde van het lichaam

<br/>
<br/>
Score:
<br/> 0-1   Erg duidelijk
<br/> 2-3   Duidelijk 
<br/> 4-5   Licht
<br/> 6-7   Optimale loodlijn, symmetrie van beide zijde van het lichaam, balans agonisten antagonisten van de voor en achterzijde van het lichaam. 
</div>
        <div class = "panel" id = "panel_loodlijn"> De patiënt staat in optimale loodlijn.  Bij het staan met goed opgebouwd lichaam nemen lichaamsdelen t.o.v. het mediane vlak een symmetrische positie in.Het lichaamsgewicht is gelijk over beide voeten verdeeld, de lengteassen van de voeten zijn een hoek van ongeveer honderdvijftig °.De benen zijn licht gestrekt op een afstand tussen beide 
        heupgewrichten. De knieën zijn nagenoeg gestrekt. Het bekken staat in de middenstand En de heupgewrichten zijn gestrekt. De normale fysiologische krommingen zijn behouden. De normale curves van de wervelkolom zijn een bocht convex naar voren cervicaal, convex naar achteren thoracaal en convex naar voren lumbaal.
        </div>

        <form>
          <input type = "radio" name = "staande_houding_globaal" value="0">
          0 </input>
          <input type = "radio" name = "staande_houding_globaal" value="1">
          1 </input>
          <input type = "radio" name = "staande_houding_globaal" value="2">
          2 </input>
          <input type = "radio" name = "staande_houding_globaal" value="3">
          3 </input>
          <input type = "radio" name = "staande_houding_globaal" value="4">
          4 </input>
          <input type = "radio" name = "staande_houding_globaal" value="5">
          5 </input>
          <input type = "radio" name = "staande_houding_globaal" value="6">
          6 </input>
          <input type = "radio" name = "staande_houding_globaal" value="7">
          7 </input>
          <input type="button" value="Volgende" onClick="history.forward()" class = "volgende" />
        </form>
        </article>

        <article id = "Staande1" class = "staande_houding">
        <h1> Staande houding </h1>
        <div class = "beschrijving" id = "Positie_van_de_enkel"> <h3>Positie van de enkel </h3>

De positie van de enkel staat .... in varus of valgusstand, of heeft een .... vergrote of verkleinde flexiehoek van 10 graden.
<br/>
<br/>
Score:
<br/> 0-1   Erg duidelijk
<br/> 2-3   Duidelijk
<br/> 4-5   Lichte, licht
<br/> 6-7   Optimaal zoals beschreven en geïllustreerd
        </div>
            <div class = "panel" id = "panel_enkelpositie"> De hielen staan ongeveer 7 à 8 cm van elkaar en de voorvoet is ongeveer 8-10° geabdiceerd t.o.v. de middellijn aan beide zijden, waardoor de totale obductie ongeveer 16-20° bedraagt. De referentielijn loopt bij de enkel iets voor de laterale malleolus en nog. Door de apex van de boog die lateraal aangegeven wordt door de art. calcanocuboidea. De dorsaalflexie van de enkel is normaal ongeveer 10° als de knie gestrekt is. </div>

        <form>
          <input type = "radio" name = "staande_houding_globaal_1" value="1">
          0 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="1">
          1 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="2">
          2 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="3">
          3 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="4">
          4 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="5">
          5 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="6">
          6 </input>
          <input type = "radio" name = "staande_houding_globaal_1" value="7">
          7</input>
          <input type="button" value="Volgende" onClick="history.forward()" class = "volgende" />
        </form>
        </article>

---

我不确定这篇文章在什么类型的容器中，但是对于普通的HTML，您还需要将HTML和正文的边距和填充设置为0。

您能做一个JSFIDLE吗？我仍然不能完全确定你在问什么。据我所知，您可能希望了解媒体查询。如果有人需要并理解这个问题，这里有一个JSFIDLE：