We would like to know how to make left bar stay while scrolling with Fixed Layout.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!--from ww w . j a v a 2 s . co m-->
margin: 0;
padding: 0;
}
body {
line-height: 160%;
overflow-x: hidden;
overflow-y: scroll;
}
#top_container {
width: 850px;
height: 100%;
margin: 0 auto;
min-height: 100%;
}
#top {
left: 0px;
top: 0px;
width: 100%;
height: 80px;
text-align: center;
position: fixed;
z-index: 10;
background-color: #EEE;
}
#bottom {
width: 400px;
height: 4em;
text-align: center;
bottom: 0px;
color: #999;
margin-left: 145px;
position: fixed;
z-index: 10;
background-color: #DDD;
}
#bottom a {
color: #999;
}
#bottom p {
line-height: 4em;
}
#contents {
left: 145px;
top: 100px;
width: 400px;
height: 100%;
color: #AAA;
line-height: 1.5em;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5em;
position: relative;
}
#contents p {
margin-top: 0px;
}
#nav {
top: 100px;
width: 125px;
bottom: 2em;
color: #313a71;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
position: fixed;
border: 1px dotted #999;
}
</style>
</head>
<body>
<body>
<div id="top_container">
<div id="nav">[Navigation]</div>
<div id="top">[Top space]</div>
<div id="contents">
[Contents]
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
congue metus a nisl vestibulum malesuada. Maecenas eu hendrerit
odio. Proin molestie tellus tellus, eget volutpat magna. Nulla nec
nibh eget libero fringilla mattis. Phasellus diam massa, laoreet
vitae tempus in, elementum non lectus. Suspendisse volutpat
elementum magna a tristique. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Integer vitae
nibh a nisi tempus euismod. Quisque ligula diam, aliquam ac
scelerisque pretium, tempus non mauris. Nullam sit amet neque lacus,
ut vulputate ligula. Suspendisse in felis mi, quis placerat urna.
Fusce tristique porttitor est ut tincidunt. Ut luctus sem ut est
venenatis porttitor. Curabitur nibh tellus, pharetra eget lobortis
non, sodales a nisl. Pellentesque vel nunc mauris.</p>
<p></p>
<p>Fusce lacinia auctor leo, eget tempor lacus tristique vitae.
In in urna id velit rutrum rutrum ut sed urna. Nulla hendrerit massa
sed enim viverra tristique. Vestibulum in tellus tortor, at congue
leo. Vivamus nec dui lorem, a gravida sem. Curabitur bibendum diam
id massa mollis ultrices rutrum eros varius. Donec interdum, justo
sed laoreet vulputate, dolor massa hendrerit elit, et sodales sapien
turpis malesuada est. In sed neque aliquam erat tempus blandit.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Morbi quis est ut nisi facilisis fringilla
luctus tempor nibh. Morbi aliquet erat a est tincidunt vitae
imperdiet dui dapibus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Aenean ipsum
diam, scelerisque quis commodo in, rutrum ut odio. Vestibulum vel
elit a nibh porttitor aliquam. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nunc
iaculis, mi in fringilla varius, elit nisl sollicitudin mauris, eget
ultricies mauris tellus id dui. Aliquam vulputate porttitor diam at
molestie.</p>
<p>Sed venenatis, velit et ultricies ultrices, arcu enim bibendum
purus, blandit luctus purus odio ut eros. Pellentesque sit amet
dolor nec ligula consectetur laoreet. Proin eget ante diam, nec
facilisis felis. Duis a tellus libero, nec molestie lectus. Ut nec
lorem at turpis ornare laoreet. Pellentesque et quam et massa
hendrerit feugiat. Pellentesque egestas, lacus a elementum aliquam,
mi mi egestas mauris, in sagittis justo diam at magna. Fusce ipsum
diam, vulputate vitae ultrices in, gravida non tellus. Integer sit
amet orci elit, vel egestas mi. Sed nec orci eu est gravida pretium
a ac magna. Quisque imperdiet accumsan diam, et mollis purus laoreet
a. Proin vitae aliquam eros. Vestibulum venenatis tristique porta.
Quisque varius velit quis justo semper et malesuada nisi aliquet.
Pellentesque pulvinar hendrerit libero vel viverra. Morbi
sollicitudin massa ac eros sagittis id euismod lectus cursus.
Vivamus nec ligula massa, quis auctor nisl. Nunc non sem at lectus
interdum mollis. Quisque volutpat fringilla nisi, ac tempus massa
blandit nec. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.</p>
<p>Integer imperdiet accumsan est, et lacinia dolor aliquet nec.
Integer egestas purus sed velit ornare ullamcorper. Vivamus varius
libero quis felis suscipit non posuere massa lacinia. Praesent
aliquam laoreet libero vel mollis. Suspendisse facilisis tellus et
sapien cursus vel vulputate est pellentesque. In arcu velit,
adipiscing faucibus tristique non, rutrum nec neque. Aenean sed
augue et augue egestas gravida. Praesent pulvinar pretium massa a
laoreet. Ut sollicitudin nisi ut diam feugiat vel suscipit justo
mattis. Maecenas sed eros urna. Cras in leo libero. Aenean ac libero
erat.</p>
<p>Proin egestas lobortis pulvinar. Nulla velit lorem, vulputate
et mollis nec, ultricies sit amet augue. Integer ipsum ipsum,
feugiat sit amet mattis in, mattis sed enim. Nulla a varius enim.
Sed fermentum ullamcorper rutrum. Vivamus ut nunc dignissim mi
sagittis sollicitudin. Aliquam interdum placerat commodo. In et
augue erat, eget auctor justo. Fusce porttitor cursus tincidunt.
Phasellus vel lorem ut lacus ultrices lobortis dapibus nec tortor.
Proin fermentum molestie urna at laoreet. In quis venenatis felis.</p>
<p>Vivamus consequat mauris vel sapien suscipit viverra. Nulla in
luctus tortor. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Morbi quis tincidunt mauris.
Maecenas tortor lectus, mattis quis eleifend sit amet, pharetra ut
nulla. Nulla vel ipsum dolor, eget tincidunt diam. Ut eros libero,
tristique vel sit amet urna. Fusce varius dui vel lacus vestibulum
pharetra. Mauris commodo ligula sit amet lacus fermentum vestibulum.
Morbi rhoncus lacus eu enim pulvinar id venenatis felis lacinia.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Morbi quis orci libero, nec elementum
tellus. Fusce scelerisque, enim eget rhoncus dignissim, eros quam
gravida nunc, quis varius massa ante gravida lectus. Cras pretium
Sed porttitor erat et elit viverra fringilla. In hac habitasse
platea dictumst. Proin suscipit semper magna id rhoncus. Duis non
ultricies nunc. Suspendisse laoreet eros sagittis ante porttitor
eget tristique ipsum rutrum. Cras dictum libero vitae sapien euismod
id euismod orci fermentum. Nulla laoreet consectetur tempus. Aliquam
Sed porttitor erat et elit viverra fringilla. In hac habitasse
platea dictumst. Proin suscipit semper magna id rhoncus. Duis non
ultricies nunc. Suspendisse laoreet eros sagittis ante porttitor
eget tristique ipsum rutrum. Cras dictum libero vitae sapien euismod
id euismod orci fermentum. Nulla laoreet consectetur tempus. Aliquam
neque eget quam ullamcorper non lacinia nisi tempus. Vestibulum et
odio ligula. Praesent vitae elit id diam congue feugiat. Nam posuere
arcu ut mauris tincidunt rutrum id vel sapien. Quisque malesuada
consectetur lacinia. Suspendisse potenti. Suspendisse id tortor non
ante ultrices aliquam. Donec condimentum hendrerit purus nec
dapibus. Fusce pretium adipiscing est sed aliquam.</p>
<p>Nam euismod fermentum elementum. Nullam eget velit vel enim
ultrices molestie. Nam sed convallis justo. Sed placerat, risus vel
dictum egestas, leo quam blandit arcu, lacinia luctus ligula augue
lacus iaculis eu rutrum magna hendrerit. Maecenas auctor mauris id
lectus posuere ac lobortis arcu vehicula. Nulla commodo bibendum
tellus a blandit. Maecenas magna felis, sollicitudin eu euismod a,
Sed porttitor erat et elit viverra fringilla. In hac habitasse
platea dictumst. Proin suscipit semper magna id rhoncus. Duis non
ultricies nunc. Suspendisse laoreet eros sagittis ante porttitor
eget tristique ipsum rutrum. Cras dictum libero vitae sapien euismod
id euismod orci fermentum. Nulla laoreet consectetur tempus. Aliquam
Sed porttitor erat et elit viverra fringilla. In hac habitasse
platea dictumst. Proin suscipit semper magna id rhoncus. Duis non
ultricies nunc. Suspendisse laoreet eros sagittis ante porttitor
eget tristique ipsum rutrum. Cras dictum libero vitae sapien euismod
id euismod orci fermentum. Nulla laoreet consectetur tempus. Aliquam
vulputate non erat. Nunc tincidunt lobortis nulla congue
condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Etiam vulputate, mi quis egestas
suscipit, risus libero malesuada eros, congue varius metus dui
vehicula purus. Fusce vel risus eu leo sollicitudin consectetur.</p>
<p>Maecenas posuere rhoncus purus, id consequat nunc hendrerit
eget. Nulla rutrum, magna id ornare convallis, enim leo feugiat
odio, sed pulvinar neque odio quis leo. Pellentesque quis urna nibh.
ut mauris eu elit consectetur viverra ut nec ipsum. Fusce
Sed porttitor erat et elit viverra fringilla. In hac habitasse
platea dictumst. Proin suscipit semper magna id rhoncus. Duis non
ultricies nunc. Suspendisse laoreet eros sagittis ante porttitor
eget tristique ipsum rutrum. Cras dictum libero vitae sapien euismod
id euismod orci fermentum. Nulla laoreet consectetur tempus. Aliquam
vestibulum, mi sed congue tempus, nulla risus imperdiet nulla, sed
tincidunt ipsum libero quis eros. Donec rhoncus faucibus arcu at
ullamcorper. Nam vitae lacus nec mi aliquet sagittis. Cras iaculis
imperdiet placerat. Nulla posuere lacinia orci at vehicula.
Suspendisse ut nulla risus.</p>
<p>Mauris a erat sed turpis vestibulum pharetra. Integer ligula
neque, rhoncus nec sollicitudin at, mattis sed libero. Nam facilisis
ante sed erat accumsan eu fringilla diam malesuada. Etiam consequat
egestas leo eget luctus. Aliquam faucibus enim non ligula rhoncus
porttitor. Phasellus fringilla mi vel ante egestas nec scelerisque
est pretium. Nam et diam ante, ut aliquet lacus. Donec ipsum libero,
malesuada vel fringilla tincidunt, tincidunt vitae leo. Praesent
urna lorem, suscipit at malesuada sit amet, ornare ac nisi.
Suspendisse iaculis porta ante, ut sollicitudin purus pulvinar
dictum. Duis ut orci sed ante faucibus rutrum eu eu libero. Quisque
id quam a purus sodales bibendum ac in nisi. Proin elit elit,
commodo eu sagittis nec, vulputate pharetra velit.</p>
</div>
<div id="bottom">
<p>
[footer]
</p>
</div>
</div>
</body>
</html>
The code above is rendered as follows: