Artūro ir Anos namukas

    Kartais tenka man pakoreguoti/padaryti HTML struktūrą su CSS ir dažniausiai pamirštų kaip reikėtų nurodyti, kad puslapio footer'is būtų visada prirakintas prie apačios. Todėl nutariau parašyti šį straipsnį, kad galečiau iškarto rasti informaciją apie šią problemą ir jos sprendimą.

    Manau, mano draugas neisižeis, kad neklausiu jo patarimo, bet jis pateikia daug įvairių atsakymų ir kartais jie man ne tinka.

    Dažniausiai problema yra štai kokia:

    Sprendimas būtų toks:

    1. padarome HTML struktūrą kaip nurodyta apačioje:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

    2. parašome CSS stiliu:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   height:100%; /* CSS rule for IE 6 and 5.5 */
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

    Štai ir viskas. Puslapis paruoštas. Tokį div tag'ų išdėstymą ir CSS stilių palaiko daugelis naršyklių: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8.

    Tiems kam reikia daugiau paaiškinimo apsilankykite originaliame straipsnyje.