How do you create non scrolling div at the top of an HTML page without two sets of scroll bars

How do you create non scrolling div that looks like the MS Office 2007 ribbon on a web page without two sets of scroll bars. One for the window and one for the div.

-------------Problems Reply------------

Try this:

<!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>
<title>Fixed Header/Full Page Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}

body {
/* Disable scrollbars and ensure that the body fills the window */
overflow: hidden;
width: 100%;
height: 100%;
}

#header {
/* Provide scrollbars if needed and fix the header dimensions */
overflow: auto;
position: absolute;
width: 100%;
height: 200px;
}

#main {
/* Provide scrollbars if needed, position below header, and derive height from top/bottom */
overflow: auto;
position: absolute;
width: 100%;
top: 200px;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="main">
<p>FIRST</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>LAST</p>
</div>
<!--[if lt IE 7]>
<script type="text/javascript">
var elMain = document.getElementById('main');

setMainDims();
document.body.onresize = setMainDims;

function setMainDims() {
elMain.style.height = (document.body.clientHeight - 200) + 'px';
elMain.style.width = '99%'
setTimeout("elMain.style.width = '100%'", 0);
}
</script>
<![endif]-->
</body>
</html>

Basically, what you are doing is removing the scrollbars from the body and applying scrollbars to elements inside the document. That is simple. The trick is to get the #main div to size to fill the space below the header. This is accomplished in most browsers by setting both the top and the bottom positions and leaving the height unset. The result is that the top of the div is fixed below the header and the bottom of the div will always stretch to the bottom of the screen.

Of course there is always IE6 there to make sure that we earn our paychecks. Prior to version 7 IE wouldn't derive dimensions from conflicting absolute positions. Some people use IE's css expressions to solve this problem for IE6, but these expressions literally evaluate on every mousemove, so I'm simply resizing the #main div on the resize event and hiding that block of javascript from other browsers using a conditional comment.

The lines setting the width to 99% and the setTimeout to set it back to 100% fixes a little rendering oddity in IE6 that causes the horizontal scrollbar to appear occasionally when you resize the window.

Note: You must use a doctype and get IE out of quirks mode.

Use a fixed position <div> element, that has 100% width and a high z-index.

You'll also want to ensure that that the start of your scrolling content isn't obscured by the fixed <div>, until you start scrolling down, by putting this in another <div> and positioning this appropriately.

<body>
<div style="position: fixed; top: 0px; width:100%; height: 100px;">
HEader content goes here
</div>
<div style="margin-top: 100px;">
Main content goes here
</div>
</body>

Note the the height of the first <div>, and the top margin of the second, will need to be adjusted to suit your needs.

P.S. This doesn't work in IE7, for some reason, but it's a good starting point, and I'm sure that you can work out some variation on this theme, that works in the way that you want it to.

I will probably be bashed by CSS purists here, but using a table with 100% width and height works in any browser, and does not require browser-specific CSS hacks.

You could alternatively use


<div style='position:absolute;top:0px:left:0px;'>Text&lt/div>;

It will jamm the div on the top of the page, but if your page scrolls down it will stay there.

Belugabob has the right idea that what you are trying to do is fixed positioning, which IE 6 does not support.

I modified an example from the bottom of this tutorial which should do what you want and support IE 6+ in addition to all the good browsers. It works because IE lets you put Javascript in style declarations:

<style type="text/css">
div#fixme {
width: 100%; /* For all browsers */
}
body > div#fixme {
position: fixed; /* For good browsers */
}
</style>

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

<body>
<div id="fixme"> ...

Category:html Views:0 Time:2008-11-02

Related post

  • variable height scrolling div, positioned relative to variable height sibling 2011-02-07

    recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height. a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.

  • Printing Scrolled Divs 2008-10-25

    I have a web page that displays a long line graph inside a div with overflow-x: scroll. This works well as a web page allowing the use to scroll back and forward through the graph. However, when printing the page the scroll position is reset to zero.

  • IE creating a phantom div in a listing loop 2011-01-25

    I've been working on this for a few days now and cannot find a solution. http://mri.sniperdyne.com/inventory.asp?CatId=C547E3B5-44F4-4BB5-BF2D-CE51BB8E8DA6 In FF the loop works fine. In IE8 it creates a phantom div at the top. Has anyone seen this be

  • Scroll div on pagescroll but stop after certain amount 2012-03-18

    I have currently got an element to scroll on page scroll and I am looking to get it to stop after around 750px as it currently overlaps the footer on smaller monitors. I have found a couple of other examples which would require some restructuring of

  • how to display a div at center top of the page 2010-01-11

    How to display a div at center top position of the page, which need to be work under all size of monitors using CSS. Mainly I get issues on IE, where not aligned properly. --------------Solutions------------- For margin: 0px auto; to work width needs

  • Creating absolute positioned div that becomes fixed on scroll - is it possible? 2012-02-27

    I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of

  • What is the simplest way to create a vertically scrolling div in the Android Browser? 2012-04-05

    Note: I realize very similar questions have been asked, but the mobile web is young and volatile, and those discussions being a couple of years old are likely out of date. I'm trying to create a simple scrolling <div> in the Android browser- wh

  • Flash inside a scrolling div - IE6 bug 2008-10-21

    I have div containing a list of flash objects. The list is long so I've set the div height to 400 and overflow to auto. This works fine on FF but on IE6 only the first 5 flash objects that are visible work. The rest of the flash objects that are init

  • Floating Scrolling Div with vertical constraints 2009-12-16

    What I am aiming for is along the lines of the example at http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ However I would like to constraint the floating div within another parent div. E.g. I

  • How to create a scrollable Div Tag Vertically? 2010-02-19

    I want to create a scrollable div tag with a fixed height that gets a vertical scroll bar. I'm trying to get this to work in chrome. This is my CSS: #designDiv { width:249px; height:299px; background-color:Gray; overflow-y: scroll; max-width:230px; m

  • Create non-transparent div on top of transparent parent element 2010-03-01

    EDIT: Changed title to actually be correct I'm trying to simulate a modal popup in all HTML and CSS and am having a bit of bad luck with one single element of what I'm doing. I want the innermost div, the one with the content, to not be opaque like t

  • Scrolling div contained in a div with jQuery? 2011-04-19

    I need to create a scrolling div (a div that floats alongside with you as you scroll down the page) but I need to constrain it inside the parent. I need this so that I may do it in multiple divs, so that as the user scrolls down the information doesn

  • How can I create a swimming div 2011-05-13

    I want to create a div as Facebook's chat bar. I want to see that div however scroll the window up or down. Do you have any sugesstions about this? Note: I have Devexpress aspx tools licence. Çağın --------------Solutions------------- use css: positi

  • horizontal scrolling div onclick with javascript or jquery 2011-07-26

    I have spent the last two days looking for a simple javascript or jquery code for this. I want to incorporate a horizontal scrolling div using javascript or jquery to display images and descriptive text for the work page of my web portfolio. It would

  • Can you change the width of a scroll bar (scrolling DIV) in IE7 2008-11-03

    Is there any way to change the entire width of the horizontal scroll bar on a scrolling div (including the nudge arrows and the handle). EDIT: I only need an IE7 solution - it's for a scrolling DIV on a touch screen terminal Thanks Matt -------------

  • change div based on how far down the page you have scrolled 2009-03-09

    I am trying to change the text inside a div based on how far down a page you have scrolled. I've been tinkering with jQuery's scrollTop and document height but have so far failed to produce the desired results. How would I get the position of an elem

  • How do I calculate an elements position in a scrolled div? 2009-08-05

    I have a div with absolute positioning set to allow vertical scrolling. My app includes drag & drop facilities that rely on me determining the coordinates of elements when events are fired. The offsets I use to calculate elements positions (i.e.

  • horizontal scrolling div not working in Safari 2009-09-07

    Hi I made this site a while ago in my table days but have just realised the horizontal scrolling dive doesn't work in Safari. #galleryscroller { overflow-x:scroll ; overflow-y:hidden; overflow:-moz-scrollbars-horizontal !important; height:138px; widt

  • How to create a floating div in BHO dynamically? 2009-10-15

    How do I create a floating DIV in a web page on load using BHO with C#.NET? I just want to inject an HTML code snippet for DIV that will display "Hello World" on the page. The div should have absolute position styles. -Datte --------------Solutions--

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.127 (s). 11 q(s)