我如何制作 3 个可独立滚动的列 [英] How can i make 3 independently scrollable columns

问题描述

我有一个网站，我希望在该网站上有 3 个可独立滚动的

元素.

html代码是这样的:

Content
<div id="window">一些很长的内容</div><div class="sidebar">更多内容</div>

关联的css是这样的:

body {溢出:隐藏；}#窗户 {字体系列:等宽；溢出:自动；宽度:70%；向左飘浮;高度:100%；}.侧边栏{溢出:自动；宽度:15%；向左飘浮;高度:100%；}

从我通过搜索互联网看到的，这应该有效.但我根本看不到任何滚动条.

为什么?

我该如何解决这个问题?

解决方案

height: 100% 仅当元素的父元素具有明确的高度时，百分比才会影响元素的高度.body 标签的高度默认是内容的高度，而不是窗口的全高.

尝试添加:

html, body { 高度:100%;}

I have a website on which I want to have 3 independently scrollable <div> elements.

The html code is this:

<div class="sidebar">Content</div>
<div id="window">Some very long content</div>
<div class="sidebar">More content</div>

The associated css is this:

body {
    overflow: hidden;
}

#window {
    font-family: monospace;
    overflow: auto;
    width: 70%;
    float: left;
    height: 100%;
}

.sidebar {
    overflow: auto;
    width: 15%;
    float: left;
    height: 100%;
}

From what I saw via searching the internet, this is supposed to work. But I don't see any scrollbars at all.

Why?

How can i fix this issue?

解决方案

height: 100% as a percentage only affects the height of the element if that element's parent has an explicit height. The height of the body tag by default is the height of the content, not the full height of the window.

Try adding this:

html, body { height: 100%; }

这篇关于我如何制作 3 个可独立滚动的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！