සාමාන්ය වෙබ් පිටු සැකසුමක් සලකමු.
<body>
<div id="wrapper">
<div id="header">
<h2>header</h2>
</div>
<div id="content">
my content
</div>
<div id="footer">
footer
</div>
</div>
</body>
මෙහි content කොටසෙහි අති දත්ත ප්රමානය අනුවයි එහි උස තීරණය වන්නේ.
පිටුවේ දත්ත ප්රමාණය හෝ පිටුව දර්ශනය වන resolution එක වෙනස් වෙද්දි සැම විටම පිටුවේ අන්තිමටම footer එක යොදන්නට අවශ්ය නම් එය කරන්නේ මෙහෙමයි.
මුලින්ම body සදහා 100% උසක් ලබා දෙමු. ඉන් පසු wrapper සදහා body එකේ ආකරයෙන්ම absolute position සහිතව 100% අවම උසක්(min-height) සහ පලලක් දෙමු.
body {
margin: 0px;
height: 100%;
}
#wrapper {
display: block;
position: absolute;
min-height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
මෙම අවම උස සදහා වන min-height ෆයර් ෆොක්ස්(Firefox) සහ සෆාරි(Safari) සදහා වැඩ කලත් IE සදහා වැඩ කරන්නේ නැහැ. ඒනිසා අපිට සිදු වෙනවා අමතර css ගොනුවක් සාදා එය <!--[if lte IE 6]> මගින් අපේ පිටුවට එකතු කරගන්න.
ඒ සදහා අපි iefix.css නමින් අලුත් css ගොනුවක් විවෘත කර එහි පහත පරිදි wrapper හි උස සදහා 100% ලබා දෙමු.
#wrapper {
height: 100%;
}
අපේ පිටුවට iefix.css අමුනා ගැනීම සදහායි පහත කේතය භාවිත කරන්නේ.
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="iefix.css" /> <![endif]-->
if lte IE 6 පරීක්ෂා කර බලනවා බ්රව්සරය IE6 හෝ IE6 වලට වඩා අඩුද කියලා. එසේනම් පිටුවට iefix.css අමුනා දෙනවා.
පිටුවේ දත්ත අතුල්කරන කොටස වන content සදහා padding-bottom අගය අප භවිතා කරන footer හි උස හා සමාන විය යුතුයි. උදාහරනය සදහා footer හි උස 50px ලෙස සලකමු.
#content {
padding-bottom: 50px;
}
අවසාන වශයෙන් footer සදහා css කේතය
#footer {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
z-index: 999;
}
සම්පූර්ණ කේතය
footerposition.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>footer position</title>
<link rel="stylesheet" type="text/css" href="footerposition.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="iefix.css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h2>Lorem ipsum dolor sit amet</h2>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam rutrum ipsum. Pellentesque tempus mi non turpis. Etiam tortor. Donec posuere, nulla quis venenatis faucibus, ante nisi convallis enim, a vestibulum purus tortor in nunc. Sed at nisl. Quisque eu mauris. Fusce a sapien. Cras lectus elit, ullamcorper vel, vehicula in, lacinia vel, nisl. Maecenas hendrerit, nulla nec viverra rutrum, velit massa euismod erat, at imperdiet enim neque nec sem. Proin felis ligula, rutrum vitae, dictum ut, rhoncus tristique, neque. Vivamus suscipit feugiat diam. Duis urna eros, suscipit vitae, malesuada ac, commodo eu, mi. Praesent tincidunt feugiat purus. Aenean lobortis sem nec leo lobortis semper. Mauris metus. Nulla facilisi. Fusce nec tortor id pede hendrerit scelerisque. Donec pharetra molestie neque.
</div>
<div id="footer">
footer content goes here
</div>
</div>
</body>
</html>
footerposition.css
@charset "utf-8";
/* CSS Document */
body {
margin: 0px;
height: 100%;
}
#wrapper {
display: block;
position: absolute;
min-height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
#content {
padding-bottom: 50px;
}
#footer {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
z-index: 999;
background-color:#999999;
}
iefix.css
@charset "utf-8";
/* CSS Document */
#wrapper {
height: 100%;
}
Posts
No comments:
Post a Comment