Html 可滚动的半固定、半可滚动布局... CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19056012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Half fixed, half scrollable layout that can be scrolled... CSS
提问by Noodle Head
I have an exotic design that needs the following. The left side must scroll, while the right side + top head must stay put (fixed). See attached image.
我有一个异国情调的设计，需要以下内容。左侧必须滚动，而右侧 + 顶头必须保持原样（固定）。见附图。
I can accomplish this by position: fixed on the top and right side. The top & right hand side stays put while the left scrolls.... BUT then the PROBLEM is that there is NO scroll bar anymore if anybody zooms in and you also cannot scroll left to right to see whole page
我可以通过位置来实现：固定在顶部和右侧。当左侧滚动时，顶部和右侧保持原样......但问题是如果有人放大，则不再有滚动条，并且您也无法从左到右滚动以查看整个页面
How would one attack such a layout?
如何攻击这样的布局？
Thank You.
谢谢你。
Could not post code before - let me try again:
之前无法发布代码 - 让我再试一次：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Exotic</title>
<style type="text/css">
#top {
background-color: #FF0;
width: 1800px;
height: 50px;
position: fixed;
left: 0px;
top: 0px;
}
#sideLeft {
float: left;
width: 950px;
background-color: #9C0;
clear: left;
}
#sidebarLeft {
background-color: #0CC;
height: 800px;
width: 300px;
float: left;
}
.list {
float: left;
width: 600px;
margin-top: 100px;
}
#ordoner {
background-color: #F90;
float: left;
width: 640px;
height: 800px;
position: fixed;
top: 50px;
left: 950px;
}
#sidebarRight {
width: 210px;
height: 800px;
position: fixed;
top: 50px;
left: 1590px;
background-color: #0CF;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="sideLeft">
<div id="sidebarLeft"><!--end #sidebarLeft--></div>
<div class="list"><!--end .lisist--></div>
<!--end #sideLeft--></div>
<div id="ordoner"><!--end #ordoner--></div>
<div id="sidebarRight"><!--end #sidebarRight--></div>
<div id="footer"></div>
</body>
</html>
Clarification:My css reflects 2 things in the right hand side but the point is that the right and the top should be static while the left scrolls... AND they should be horizontally scrollable IF a user zooms :)
澄清：我的 css 在右手边反映了两件事，但重点是右边和顶部应该是静态的，而左边是滚动的......如果用户缩放，它们应该是水平滚动的 :)
Also, I've tried wrapping things in a container div, but that has its own problems - it scrolls but never reaches the right hand side if the window is not maximized.
另外，我尝试将东西包装在容器 div 中，但这有其自身的问题 - 如果窗口未最大化，它会滚动但永远不会到达右侧。
Thanks again.
再次感谢。
To clarify: As an example to get my point across... please resize the stackoverflow window to half your horizontal screen size... Now see how you can scroll left to right? If you zoom in, you can scroll left to right also to see the whole page. Well, in my layout, which works in full screen browser mode... once I resize that scroll bar at the bottom does not appear at all leaving the user with no ability to scroll horizontally. See picture below
澄清：作为一个例子来表达我的观点......请将stackoverflow窗口的大小调整为水平屏幕大小的一半......现在看看如何从左向右滚动？如果放大，还可以从左向右滚动以查看整个页面。好吧，在我的布局中，它在全屏浏览器模式下工作......一旦我调整底部的滚动条的大小就根本不会出现，让用户无法水平滚动。见下图
Fiddle http://jsfiddle.net/moby7000/tWb3e/
小提琴 http://jsfiddle.net/moby7000/tWb3e/
回答by avrahamcool
Its not very hard to create a layout like this.
创建这样的布局并不难。
I created one for you, see that Working Fiddle
我为您创建了一个，请参阅工作小提琴
HTML:
HTML：
<div class="Container">
<div class="Header">
<p>The Header div height is not fixed (But he can be if you want it to)</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
</div>
<div class="Content">
<div class="Wrapper">
<div class="RightContent">
<p>You can fix the width of this content.</p>
<p>if you wont, his width will stretch just as it needs to.</p>
</div>
<div class="LeftContent">
<p>this will scroll</p>
</div>
</div>
</div>
</div>
CSS:
CSS：
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #6ea364;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: purple;
overflow: auto;
}
.RightContent
{
background-color: orange;
float: right;
margin-left: 10px;
}
Bonus:with a little change in the CSS, you can create a beautiful scrolling. See that Fiddle
奖励：只需稍微更改 CSS，您就可以创建漂亮的滚动。看到那个小提琴
Edit:If you want to set a width value to the left side, that is actually bigger then the body size (and to have an horizontal scroll), do it thatway.
编辑：如果您想设置一个宽度值到左侧，这实际上是更大然后是车身尺寸（并有一个水平滚动），做到这一点是这样。
<div class="LeftContent">
<div style="width:1200px;"> <-- better to aplly the width from the CSS
..<The content>..
</div>
</div>
回答by Arcadio Garcia
Have you tried
你有没有尝试过
overflow-y: scroll;
in body?
在体内？
回答by aaronmallen
you need to add overflow:auto;to the area you want to scroll.
您需要添加overflow:auto;到要滚动的区域。
