How to code a scrolling frame in css


Tags: html,css

Problem :

Using the page in the link below as an example, I am trying to figure out how to code the page so the header stays static, and only the information in the body would scroll when a user scrolls up and down, rather then the whole page however I cannot figure it out. I understand it can be done with frames however I was wanting to do it without it.

example page: http://matthewjamestaylor.com/blog/perfect-full-page.htm

=========================

Thank you. Editing it I'm sure I'm just missing something simple I just cannot figure out what to change to the fixed code. Here is the header code I am using.

/* Header styles */
#header {
    clear:both;
    float:left;
    width:100%;
}
#header {
    border-bottom:1px solid #04B45F;
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
    margin:0;
}
#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#fff;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#000;
    background:#fff;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}


Solution :

Don't need iframe, use CSS position: fixed instead, example here: http://jsfiddle.net/exuhyf9a/


    CSS Howto..

    How to set background image to keep its position while browser width is changing?

    How to create double border which is not touching to edges in pure css?

    How to simulate nonstoparagraphing in HTML/CSS?

    How to properly preload images, js and css files?

    How can I align my form to the center of the background? CSS

    Image title both alingn. How to make each element aligned vertically?

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    ASP.NET MVC: How do other people apply conditional CSS classes?

    loading images to show them offline

    How do I use CSS transitions to fixed position a scaled element?

    CSS, IE7… how to not move down the content

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    How to prevent outside CSS from adding and overriding ReactJS component styles

    How to style dropdown menu using CSS in HTML

    How can I overlay a canvas over a paragraph so that its title is shown when hovering over its entirety?

    How to read different CSS classes with the same beginning with jquery?

    How to change or remove quote symbol in css

    how do I use the :valid and :invalid selectors for css?

    How to call particular CSS file only for desktop not for mobile [closed]

    How can I stretch my navigation and content area height to 100% in CSS?

    CSS - How can I push the submenus to the left?

    How can I make my CSS code compatible with all browsers? [closed]

    CSS - Table mode how to display correctly?

    How can I prevent a form-control from taking a new line in Bootstrap

    How does the CSS Block Formatting Context work?

    How to create rounded shapes with css or SVG

    CSS - How to hide extra images

    How to stop jQuery-ui from adding classes to my button

    How to set CSS class to Button control using Session value in design page

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?