带有顶部，左侧和右侧DIV的HTML CSS DIV布局通过滚动中心DIV修复

Question

图片（尚未发布帖子） https://flic.kr/p/ppcZtV

这是我到目前为止所做的，我不确定jsFiddle代表它：http://jsfiddle.net/5jeymu5f/ （我在我的网站上注释了一些内容，以使示例更简单）

我正在尝试做什么并看到附图，我基本上想要一切都固定，因为它们是各种菜单。所有内容都输入紫色内容＆＃39;部分。有些页面会变长，你必须向下滚动才能将所有内容都杀死。我有多个＆＃39;到顶部＆＃39;与锚点链接，但我不想使用它们。图片只是位置的图示，而不是正确的尺寸。

此外，我的右窗格甚至没有显示在代码中。我试着全力以赴，不知道下一步该去哪里。

我怎样才能保持顶部包装，左侧导航和正确的空间固定在它们所在的位置，只有我的中间内容部分滚动？

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

添加＆＃34;溢出：自动;＆＃34;你的内容包装器就可以了。你还需要一个固定的高度。

Answer 2

您应该从position: fixed删除#container。然后不要将float: right用于固定元素，而是使用right: 0，它会为您提供更全面的视图。这样做（并删除溢出属性）我得到一个非常令人信服的结果，你只需要玩div的宽度和位置，使它看起来很好。 ：）

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

#top-wrapper {
    width: 1080px;
    left: 0;
    top: 0;
    /* 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 {
    left: 0px;
    background-color: #8000FF;
    width: 17%;
    margin-right: 10px;
    position: fixed;
}
#content {
    float: right;
    width: 80%;
    background-color: #8000FF;
    /*overflow: scroll;*/
    height: 1080px;
}


#right {
    right: 0px;
    background-color: #01DF01;
    width: 20%;
    position: fixed;
    clear: both;
}

编辑：第二期 - 内容宽度不适合。

我已经使用了一些jQuery来解决这个问题，它可能在css中有用，但说实话，我对jQuery比较熟悉。

首先是css

/* ***** Reset css ******** */
/* I've added this part since I noticed strange bwhite border due to
 * default css parameter of browser (I use Firefox) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* ************************ */


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

#top-wrapper {
    width: 1080px;
    left: 0;
    top: 0;
    /* 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 {
    left: 0px;
    background-color: #8000FF;
    width: 200px; /* changed to pixel size */
    margin-right: 10px;
    position: fixed;
}
#content {
    position: relative;
    left: 200px; /* changed to pixel size (this should be equal #left.width !) */
    background-color: #8000FF;
    height: 1080px;
}


#right {
    right: 0px;
    background-color: #01DF01;
    width: 200px; /* changed to pixel size */
    position: fixed;
    clear: both;
}

没有太多更改，只删除#content的宽度并将宽度更改为#left和#right中的像素。 Plz还注意到您需要将#content的左参数更改为右边的宽度。

HTML中的jQuery

我已将此部分添加到html的<head>中。我试着解释一下，但如果您有任何疑问，请询问。

<!-- Import of the JQuery library on the jQuery website (you can upload it and use it localy) -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function() {
  // Get the width of the #left and #right divs
  var leftWidth = $('#left').width();
  var rightWidth = $('#right').width();

  function setWidth() {
    // get the width that content should have basically here :
    // width of the window - width of left - width of right
    var widthContent = $(window).width() - leftWidth - rightWidth;

    // Choose here the minimal width of content
    var minContentWidth = 300;

    // set the width of content to min width if necessary
    if (widthContent < minContentWidth) {
        widthContent = minContentWidth;
    }

    // get the content div and set its width
    $('#content').css({
      'width': widthContent + 'px'
    });
  }

  // when the windows is rezised call the function resize
  $(window).on('resize', function() { setWidth(); });
  setHeight();
});
</script>