Html 仅滚动内容 div，其他应修复

Scrolling only content div, others should be fixed

提问by

I have three divs. I need header and left_side divs to be fixed and content div to scroll. I've been searching for solution and found something with overflowand position. But I can not use it corectly. How can I do this? I will be thankfull for every kind of answer.

我有三个div。我需要固定 header 和 left_side div，滚动内容 div。我一直在寻找解决方案并找到了overflow和position 的东西。但我不能正确使用它。我怎样才能做到这一点？我会很感激每一种答案。

  HTML
------
<div id="header">

</div>

<div id="left_side">    
</div>

<div id="content">
</div


CSS
-----
body {   
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0px auto;
    font-family: Calibri, Georgia, Ubuntu-C;  
    font-size: 16px;
    margin-bottom: 20PX
}

#header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
}


#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden; 
    position:absolute;
    font-size: 16px;
}

#content{
     height: auto;
     padding: 20px;
     margin-left: 230px;
     margin-right: 20px;
    padding-bottom: 30px
 }

采纳答案by Praveen

overflow: auto;adds the scroll when need

overflow: auto;需要时添加滚动

#header{
    width: 100%;
    height: 139px;
    background-image: url('images/Header_grey.gif');   
    overflow: hidden;  //code added to prevent scroll
}


#left_side{
    width: 210px;
    height: 700px;
    background-image: url('images/Left_side.gif');
    background-repeat:repeat-y;
    overflow:hidden;  //code added to prevent scroll
    position:absolute;
    font-size: 16px;
}
#content{
     height: auto;
     padding: 20px;
     margin-left: 230px;
     margin-right: 20px;
    padding-bottom: 30px;
    overflow: auto;  //code added
 }

回答by Ritabrata Gautam

• at first you will need to have a fixed height for content area.
• then make overflow:autothere

• 首先，您需要为内容区域设置一个固定的高度。
• 然后在overflow:auto那里

ERROR in your code:: you want to have a scroll bar for a div,but you are declaring that div height as auto

您的代码中出现错误::您想要一个 div 的滚动条，但是您将该 div 高度声明为 auto

you cant demand a scroll bar when the height is auto,to have scroll bar you will need to have a fixed height for that div and when the content height will be greater than div height it will introduce scroll bar automatically

当高度为自动时，您不能要求滚动条，要使滚动条具有该 div 的固定高度，并且当内容高度大于 div 高度时，它将自动引入滚动条

NOTE:so the changes in your css will be

注意：所以你的 css 中的变化将是

#content{
 height: 300px;/*..very important if you want scroll bar...*/
 overfow:auto; /*..will introduce scroll bar when needed..*/
 padding: 20px;
 margin-left: 230px;
 margin-right: 20px;
padding-bottom: 30px
}

EXAMPLE :: FIDDLE

示例::小提琴

回答by Louis Ricci

You can just use position fixed. http://jsfiddle.net/Nrs2u/1/

您可以只使用位置固定。http://jsfiddle.net/Nrs2u/1/

#header {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 10%;
    background-color: purple;
}
#side {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: 10%;
    width: 10%;
    height: 90%;
    background-color: red;
}
#body {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 90%;
    height: 300%;
    background-color: orange;
}

回答by Cody Guldner

If you want the header and left side to stay in their position while scrolling, you will have to use position:fixed

如果您希望标题和左侧在滚动时保持在其位置，则必须使用 position:fixed

回答by Javier Puga

#left_side{
    ...
    overflow:auto;  

}

Set also a padding-rightto create a space between div's inner content and scrollbar

也设置 apadding-right以在 div 的内部内容和滚动条之间创建一个空间

回答by John Pankowicz

As an learning exercise, I decided to update the answer by using CSS3 Flexbox. I also tried to more closely match the layout that jstorm31 was attempting to create.

作为学习练习，我决定使用 CSS3 Flexbox 更新答案。我还尝试更紧密地匹配 jstorm31 试图创建的布局。

Ritabrata's answer is the correct one: If you want a specific element to have scroll bars, you need to set its height (and/or width) to a fixed size and overflow to auto.

Ritabrata 的答案是正确的：如果您希望特定元素具有滚动条，则需要将其高度（和/或宽度）设置为固定大小并将溢出设置为自动。

Code also to be found here: Plunker

代码也可以在这里找到：Plunker

style.css

样式文件

#header{
    overflow: hidden; 
    background-color: #880016; 
    height: 50px;
    border-bottom: 4px solid black;
    padding: 10px;
    font-size: 20px;
}
#side_and_content {
    display: flex;
}
#left_side{
    flex: 1;
    overflow:hidden; 
    background-color: #ED1B24;  
    height: 200px;
    border-right: 2px solid black;
    padding: 10px;
}
#content{
    flex: 5;
    overflow: auto;
    background-color: #FF7F26;   
    height: 200px;
    border-left: 2px solid black;
    padding: 10px;
}

index.html

索引.html

<div id="header">
    header header header header header header
</div>
<div id="side_and_content">
    <div id="left_side">  
        left side left side left side left side left side
    </div>

    <div id="content">
CSS3 Flexbox Concepts: 
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
 (rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
 By default there is only one flex line per flex container.<br>
 It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout
    </div>
</div>

回答by Timm

position: stickyon the element, that should stay in place when scrolling, worked for me in a similar situation. https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

position: sticky在元素上，滚动时应该保持原位，在类似的情况下对我有用。 https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

position: sticky;
top: 0px;