CSS 有一个固定位置的 div，如果内容溢出需要滚动

Have a fixed position div that needs to scroll if content overflows

提问by TCD Factory

I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address.

我实际上有两个问题，但让我们先解决主要问题，因为我认为另一个问题更容易解决。

I have a fixed position div on the left side of the scroll for a menu. Right side is a standard div that scrolls properly. The issue is that when the browser view-port is too small to see the entire menu.. there is no way to get it to scroll that I can find (at least not with css). I've tried using different overflows in css, but nothing makes the div scroll. The div that contains the menu is set to min-height:100% and position:fixed.. both attributes I need to keep.

我在菜单的滚动左侧有一个固定位置 div。右侧是一个可以正确滚动的标准 div。问题是当浏览器视口太小而无法看到整个菜单时..没有办法让它滚动我可以找到的（至少不是使用 css）。我试过在 css 中使用不同的溢出，但没有任何东西使 div 滚动。包含菜单的 div 设置为 min-height:100% 和 position:fixed.. 我需要保留这两个属性。

The div containing the menuis inside another wrapper div that is positioned absolutely and height set to 100%.

包含菜单的 div位于另一个绝对定位且高度设置为 100% 的包装 div 内。

How can I get it to scroll vertically if the content is too tall for the div?

如果内容对于 div 来说太高，如何让它垂直滚动？

That leads me to the other issue, that i don't want a scroll bar to display.. but I think I may already have an answer to that (only it doesn't work yet because I can't get the div to scroll to begin with).

这让我想到了另一个问题，我不想显示滚动条。开始）。

Any solutions? Perhaps javascript is needed? (of which i know little about)

任何解决方案？也许需要javascript？（其中我知之甚少）

JS Fiddle Example

JS小提琴示例

and the relevant code that is causing the issue (since posting the whole thing in here is waaay too long):

以及导致问题的相关代码（因为在这里发布整个内容太长了）：

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

Also tried adding height:100% as well just to see if that was an issue but it didn't work either... nor did a fixed height, such as 600px.

还尝试添加 height:100% 只是为了看看这是否是一个问题，但它也不起作用……固定高度也不起作用，例如 600px。

回答by strider820

The problem with using height:100%is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

使用的问题height:100%是它将是页面的 100% 而不是窗口的 100%（正如您可能期望的那样）。这将导致您看到的问题，因为非固定内容的长度足以包含 100% 高度的固定内容，而无需滚动条。浏览器不知道/关心您实际上无法向下滚动该栏以查看它

You can use fixedto accomplish what you're trying to do.

你可以fixed用来完成你想要做的事情。

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

This fork of your fiddle shows my fix: http://jsfiddle.net/strider820/84AsW/1/

你小提琴的这个叉子显示了我的修复：http: //jsfiddle.net/strider820/84AsW/1/

回答by ignacioricci

Here are both fixes.

这是两个修复程序。

First, regarding the fixed sidebar, you need to give it a height for it to overflow:

首先，关于固定侧边栏，你需要给它一个高度让它溢出：

HTML Code:

HTML代码：

<div id="sidebar">Menu</div>
<div id="content">Text</div>

CSS Code:

CSS 代码：

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Live example: http://jsfiddle.net/RWxGX/3/

现场示例：http: //jsfiddle.net/RWxGX/3/

It's impossible NOT to get a scroll bar if your content overflows the height of the div. That's why I've added a media query for screen height. Maybe you can adjust your styles for short screen sizes so the scroll doesn't need to appear.

如果您的内容超出 div 的高度，则不可能不获得滚动条。这就是我为屏幕高度添加媒体查询的原因。也许您可以调整短屏幕尺寸的样式，这样滚动就不需要出现了。

Cheers, Ignacio

干杯，伊格纳西奥

回答by Lefan

Generally speaking, fixed section should be set with width, heightand top, bottomproperties, otherwise it won't recognise its size and position.

一般而言，固定部分应设置width,height和top,bottom属性，否则将无法识别其大小和位置。

If the used box is direct child for body and has neighbours, then it makes sense to check z-indexand top, leftproperties, since they could overlap each other, which might affect your mouse hover while scrolling the content.

如果使用的框是 body 的直接子级并且有邻居，那么检查z-index和top, left属性是有意义的，因为它们可能相互重叠，这可能会影响滚动内容时鼠标悬停。

Here is the solution for a content box (a direct child of bodytag) which is commonly used along with mobile navigation.

这是一个内容框（body标签的直接子元素）的解决方案，它通常与移动导航一起使用。

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Hope it helps anybody. Thank you!

希望它可以帮助任何人。谢谢！

回答by Efiwe

The solutions here didn't work for me as I'm styling react components.

这里的解决方案对我不起作用，因为我正在设计 React 组件的样式。

What worked though for the sidebar was

虽然对侧边栏有用的是

.sidebar{
position: sticky;
top: 0;
}

Hope this helps someone.

希望这可以帮助某人。

回答by Siddhesh T

Leaving an answer for anyone looking to do something similar but in a horizontaldirection, like I wanted to.

为任何想要做类似但在水平方向上做的事情的人留下答案，就像我想做的那样。

Tweaking @strider820's answer like below will do the magic:

像下面这样调整@strider820的答案会变魔术：

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

That's it. Also check this commentwhere @trainexplained using overflow:autoover overflow:scroll.

就是这样。还要检查这个评论这里@train使用解释overflow:auto过overflow:scroll。