Sådan Put en sidefod på en webside

Sådan Put en sidefod på en webside Sean Gallup / Getty Images Nyheder / Getty Images

fleste hjemmesider indeholder sidefødder med information såsom ophavsret datoer, "om os" information og karrieremuligheder.Selv om det synes som om det skal være enkel nok til at placere elementer på bunden af ​​siden, ofte oplysningerne vil bevæge afhængigt af størrelsen af ​​browseren og mængden af ​​tekst.Brug cascading style sheets (CSS) og divs, kan du oprette en simpel sidefod, der vil bo på bunden af ​​siden, uanset vinduets størrelse og indholdet mængde.

hvad du har brug

  • Stylesheet
  • webside skrevet i CSS

Instruktioner

  1. Indstil legemshøjde og container klasse egenskaber.I CSS style sheet indstille "html" og "krop" klasser til 100 procent højde.Tilføj en "container" klasse og indstil min-højde til 100 procent, højde til auto! Vigtigt, højde til 100 procent og margin til 0 auto negativ (sidefoden højde).

    For eksempel "html, body {height: 100%;}" og ".container {min-height: 100%;! height: aut

    o vigtigt;højde: 100%;margin 0 auto -35px. "

  2. Tilføj to klasser for sidefoden.En klasse vil indeholde selve sidefod, mens den anden klasse udvider margenerne ud siden for at gøre plads til sidefoden.Sæt begge disse klasser til samme højde.For eksempel, ".footer {height: 35px;}" og ".extender {height: 35px;}"

  3. Se følgende eksempel CSS style sheet.Kopier og indsæt følgende kode i dit typografiark.Ændre navne og sidefod højde som ønskes.

    {margin: 0;}
    html, body {height: 100%;}
    .wrapper {min-height: 100%;! height: auto vigtigt;højde: 100%; margin: 0 auto -35px;}
    .footer {height: 35px;}
    .extender {height: 35px;}

  4. Tilføj disse klasser på den hjemmeside.Indtast en div for beholderen tag mellem åbningen og de afsluttende tags for kroppen.Indtast indhold til websiden efter beholderåbningen tag.Tilføj en div for extender klassen efter indholdet 'afsluttende tag.Luk derefter beholderen tag efter forlængeren afsluttende tag.Tilføj en div for sidefoden efter at beholderen afsluttende tag.Indtast indhold til sidefoden.Luk derefter footer tag.

  5. Se følgende HTML-kode.Kopier og indsæt følgende kode ind på din hjemmeside.Ændre navnene at afspejle din faktiske klasser og tilføje indhold som ønsket.

    & lt; html & gt;

    & amp; lt; head & gt;
    & amp; lt; link rel = & amp; quot; stylesheet & amp; quot;href = & amp; quot; layout.css & amp; quot;... / & Gt;
    & amp; lt; / head & gt;
    & amp; lt; body & gt;
    & amp; lt; div class = & amp; quot; beholder & amp; quot; & gt;
    & amp; lt; p & gt; Web Content & amp; lt; / p & gt;
    & amp; lt; div class = & amp; quot; extender & amp; quot; & gt; & amp; lt; / div & gt;
    & amp; lt; / div & gt;
    & amp; lt; div class = & amp; quot; footer & amp; quot; & gt;
    & amp; lt; p & gt; Footer Indhold & amp; lt; / p & gt;
    & amp; lt; / div & gt;
    & amp; lt; / body & gt;

    & lt; / html & gt;

269
0
1
Html