Two-column HTML/CSS right column scrolling - left column stay put - easiest way to accomplish this?
I have a two-column layout and I want th开发者_如何学运维e left column to stay put and the right column to be scrollable. What's the easiest way to accomplish this?
Do you mean something like this? See http://jsfiddle.net/NGLN/bePrn/.
Tested on Win7 in IE7, IE8, IE9, Opera 11, FF 4, Chrome 12, SafariWin 5.
You could make two div elements with CSS-property overflow: auto. This will give you kind of an iframe style box - this also means that this won't be the default scrolling area.
Another possibility is to use fixed positioning on your static (unscrollable) column.
The could be accomplished with something like this:
<!doctype html>
<html>
<head>
<style>
#left {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
background: #ffa;
}
#right {
margin-left: 200px;
}
</style>
</head>
<body>
<div id="left">
Static container
</div>
<div id="right">
Lots of scrollable content goes here
</div>
</body>
</html>
加载中,请稍侯......
精彩评论