HTML CSS DIV 布局，顶部、左侧和右侧 DIV 固定在滚动中心 DIV 中

Question

图片(尚未发布代表) https://flic.kr/p/ppcZtV

这是我目前所拥有的，我不确定 jsFiddle 代表它:http://jsfiddle.net/5jeymu5f/ (我注释掉了我网站上的内容以使示例更简单)

我正在尝试做的事情并查看所附图片，我希望基本上所有内容都已修复，因为它们是各种菜单。所有内容都输入到紫色的“内容”部分。有些页面变得很长，你必须向下滚动，这会杀死顶部的所有内容。我有多个带有 anchor 的“到顶部”链接，但我不想使用这些链接。图片仅供引用，并非正确尺寸。

此外，我的右 Pane 甚至没有出现在代码中。我尝试在整个板上固定，但不确定下一步该去哪里。

我怎样才能让顶部包装、左侧导航和右侧空间固定在它们所在的位置，并且只让我的中间内容部分滚动？

#container {
	width: 1440px;
	/* background-image: url(../graphics/wall.jpg); */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: fixed;
    background-color: #000000;
}

#top-wrapper {
	width: 1080px;
	float: left;
	/* margin: 10px; */
	/* background-image: url(../graphics/transparent.png); */
	margin-bottom: 13px;
	position: fixed;
    background-color: #DF0101;
}

#top {
	background-color: #FFEF0F;
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 13px;
}

#pagetitle {
	width: 100%;
	float: left;
	background-color: #ffef0f;
	/* background-image: url(../graphics/caution_long.gif); 
	background-repeat: repeat;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #F63;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bolder;
	font-size: 18px; */
	height: 24px;
	clear: both;
	
}

#content-wrapper {
	float: none;
	width:auto
	background-color: #0080FF;
	width: 1080px;
	/* background-image: url(../graphics/transparent.png); */
	margin-top: 200px;
	
}

#left {
	float: left;
	background-color: #8000FF;
	width: 17%;
	margin-right: 10px;
	/* position: fixed; */
}
#content {
	float: right;
	width: 80%;
	background-color: #8000FF;
	overflow: scroll;
	height: 1080px;
}


#right {
	float: right;
	background-color: #01DF01;
	width: 20%;
	/* position: fixed; */
	clear: both;
}

<div id="container">

    <div id="top-wrapper">

        <div id="top">
            top banner
        </div>

        <div id="pagetitle">
            page title banner
        </div>
  
    </div>

    <div align="top" id="right" title="right pane">
        right pane
    </div>

    <div id="content-wrapper">

        <div id="left">
            navigation menu
        </div>
        
        <div id="content">
            main content
        </div>
  
    </div>

<div class="clear"></div>


</div>

Answer 1

检查一下，看起来您正在尝试做同样的事情。 Scrolling only content div, others should be fixed .

添加“溢出:自动；”到你的内容包装器就可以了。您还需要一个固定的高度。