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

이 부분을 <head>html 에 추가했습니다 . 설명하려고했지만 질문이 있으시면 물어보세요.

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