GyanCode

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed header and footer</title>
<style type="text/css">
html, body { margin:0; padding:0; font-family: verdana; font-size: 13px;}
html, body { height:100%;}
#top-bar {position:fixed; top:0px;left:0px;height:50px;width:100%; z-index:999; overflow:hidden;}
#topbar-inner, #footer-inner { background: #03bf95; text-align: center; color: #FFF;font-size: 18px; padding: 9px;}
#footer { position:fixed; bottom:0; width:100%; height:40px; z-index:999;}
.inner { padding:50px 0; position:relative;}
p { margin:0 0 1em; font-size: 13px;}
#contain-all { width: 60%; margin: 0px auto; padding: 20px;}
</style>
</head>
<body>
<div id="outer">
<div id="contain-all">
 <div class="inner">
 This is an experimental layout and untested in a real situation but preliminary
 results look good. Note that opera 10.6 has introduced a bug where if the page has been scrolled and then refresh is clicked the fixed elements will disappear. 
 The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.
 Good browsers get normal fixed positioning but ie6 and under make use of a bug in ie6 where children of elements that have overflow defined behave as though they are fixed.
 some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : some text to cause scrolling :
 : some text to wrap : some text to wrap : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 some text to cause scrolling : 
 Last bit of text
 </div>
</div>
</div>
<div id="top-bar">
<div id="topbar-inner">Fixed Top & bottom</div>
</div>
<div id="footer">
<div id="footer-inner"> Fixed footer </div>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate "height" with CSS Transitions </title>
</head>
<style type="text/css">
body{font-family: verdana; font-size: 14px; text-align: center;}
.accordion {display: inline-block;text-align: left; margin: 1%; width: 70%;}
.accordion:hover .accordion-content { max-height: 300px;}
.accordion-content { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; transition: max-height 1s; background: #ffb1b1; overflow: hidden; max-height: 0;}
.accordion-inner { padding: 0 15px;}
.accordion-toggle { -webkit-transition: background .1s linear; -moz-transition: background .1s linear; -ms-transition: background .1s linear; -o-transition: background .1s linear; transition: background .1s linear; background:#de0000;
border-radius: 3px; color: #fff; display: block; font-size: 24px; margin: 0 0 10px; padding: 10px; text-align: center;
text-decoration: none;}
.accordion-toggle:hover { background:#a20000;}

 </style>

<body>
<div class="accordion">

<a href="#" class="accordion-toggle">Hover for height animate</a>
<div class="accordion-content">
 <div class="accordion-inner">
 For animate the "height" of element with CSS Transitions you need use "max-height".
 If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.
 </div>
</div>
</div>

</body>
</html>

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Friday 17 March 2017

Why can't I use background image and color together?

Tuesday 14 March 2017

Print Jquery

Sunday 12 March 2017

Fixed header and footer

Wednesday 8 March 2017

Animate "height" with CSS Transitions