4 svar · 735 visningar · startad av Fuel
Någon som har gjort det ? ..jag har gjort 2 försök, bägge lyckade i FF. I explorer ser det ut som nåt charles manson har målat i ett lsd rus :x
En fast header & footer, däremellan ska det scrolla. Att få scrolllist bara över mitten partiet är enkelt, att få scrolllisten över hela sidan är lite trixigare.
Som sagt, får det att funka i FF men inte IE. Vill ha det med så lite "hack" som möjligt...
#middle-frame {
overflow: auto;
height:300px;
}
<div id="middle-frame"></div>
borde väl räcka? eller "emulera frames"? då menar du en iframe eller?
tack.. men Berea Streets var nästan som det jag redan har tittat på. Tänk om det vore så enkelt som: du sitter där, du där och du scrollar.
Har noterat att om man gör så här, så stannar "header" längst upp det i flesta browsers ? eller?
#header {
position: absolute;
}
#header {
position: fixed;
top: 0;
left: 0;
}
mjaa.. kör så här.. skiter i IE.. där får allt scrolla..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
body
{
margin: 0;
padding: 0;
height: 100%;
}
#header
{
height: 100px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 2;
overflow: hidden;
background-color: green;
}
h1
{
margin-top: 0;
}
#content
{
width: 100%;
overflow: auto;
z-index: 1;
}
#footer
{
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
height: 40px;
z-index: 2;
background-color: orange;
}
/*]]>*/--></style>
<!--[if !IE]><!-->
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
#content
{
padding: 100px 0 40px 0;
}
/*]]>*/--></style>
<!--<![endif]-->
<title>Emulate Frames</title>
</head>
<body>
<div id="header">Header</div>
<div id="content">
<h1>Emulate Frames</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
</div>
<div id="footer">Footer</div>
</body>
</html>