<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
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;
}
/* other non-essential CSS */
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
푸터고정.html<body>
<div id="container">
<div id="header">
<!-- Header start -->
<p><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" title="How to keep footers at the page bottom with valid CSS">« Back to the CSS article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<p>In this demo the footer is pushed to the bottom of the screen in all standards compliant web browsers even when there is only a small amount of content on the page. This with work with IE 6 and IE 5.5 too. Non-standards compliant browsers degrade gracefully by positioning the footer under the content as per normal. Read the <a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page">full article</a> for all the details.</p>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<p><strong>Footer</strong> (always at the bottom). View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a> and <a href="http://matthewjamestaylor.com/blog/-web-design">web design articles</a>.</p>
<!-- Footer end -->
</div>
</div>
</body>
</html>
'개발연습막쓰기 > 개발연습 막쓰기' 카테고리의 다른 글
| css3 Animate.css (0) | 2016.04.05 |
|---|---|
| 제이쿼리 애니메이션 예제 (0) | 2016.03.28 |
| 트리매뉴 (0) | 2016.03.23 |
| 로딩중 (0) | 2016.02.23 |
| 셀렉트박스 select (0) | 2016.02.19 |