CSS 100% 宽度但避免滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3541863/
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
CSS 100% width but avoid scrollbar
提问by n8wrl
This is probably a variation on something that has been solved dozens of times but CSS really makes me feel like a fool.
这可能是已经解决了几十次的事情的变体，但 CSS 真的让我觉得自己像个傻瓜。
I am trying to build a widget that can be positioned and sized in a variety of ways. It's a pretty simple layout - fixed-height header, fixed-height footer, and a body that takes up the remaining space. The overall width and height varies. The content of the body needs to scroll. I have the overall container, header, footer, and body sizing ok.
我正在尝试构建一个可以以多种方式定位和调整大小的小部件。这是一个非常简单的布局——固定高度的页眉、固定高度的页脚和一个占据剩余空间的主体。整体宽度和高度各不相同。正文的内容需要滚动。我有整体容器、页眉、页脚和正文大小确定。
But what I want is for the body to scroll when it needs to WITHOUT shrinking content to the left when the scrollbar appears. That is, I want the body to be as wide as it can MINUS the scrollbar that would be there iF it needed to scroll, so that when it DOES need to scroll there is no shrink. In effect, I want this:
但是我想要的是让身体在需要滚动条时不向左缩小内容时滚动。也就是说，我希望主体尽可能宽，减去如果需要滚动时将存在的滚动条，这样当它确实需要滚动时就不会缩小。实际上，我想要这个：
| - - - unknown width - - -|
+--------------------------+
| content |*|
| might |*|
| scroll |*|
+--------------------------+
I want the content that might scroll to be as wide as it can MINUS the potential scrollbar width (|*| region).
我希望可能滚动的内容尽可能宽，减去潜在的滚动条宽度（|*| 区域）。
What I have now is something like this:
我现在拥有的是这样的：
<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
<div id="scrollContent" style="???">
</div>
</div>
I have tried margins, padding, even %-widths for the inner-most div and all 'do the shift' thing. I also need this to work in FF3, IE7/8 and (fantasy?) IE6.
我已经为最里面的 div 尝试了边距、填充，甚至 %-widths 和所有“做移位”的事情。我也需要它在 FF3、IE7/8 和（幻想？）IE6 中工作。
采纳答案by casablanca
Use overflow: scrollinstead of overflow: auto- that'll force a scrollbar to always appear.
使用overflow: scroll而不是overflow: auto- 这将强制滚动条始终出现。
回答by Stuart Burrows
Add another wrapper inside the element that will have the overflow:auto style and set it to about 18px narrower. The scrollbar should appear in that 18px gap.
在元素中添加另一个包装器，该包装器将具有 overflow:auto 样式并将其设置为约 18px 窄。滚动条应该出现在 18px 的间隙中。
回答by Arseni Mourzenko
Why not displaying always the scrollbars, even when there is no need to scroll?
为什么不总是显示滚动条，即使不需要滚动？
You can achieve this by setting overflow:scroll;to the container.
您可以通过设置overflow:scroll;到容器来实现这一点。
回答by jek
I had a problem that is similar that I used the below solution for, I am not sure if this can be a solution to what you want to do, but it could be.
我遇到了一个与我使用以下解决方案类似的问题，我不确定这是否可以解决您想要做的事情，但可能是。
I had a div that resized to content automatically, and then the scroll was added, shrinking the inside, so that the table in it wrapped text, instead of making the container that much wider. The unwanted effect is seen in the below Old example, if the textarea is resized downward and the scroll appears.
我有一个自动调整为内容大小的 div，然后添加滚动条，缩小内部，以便其中的表格包裹文本，而不是使容器变得更宽。如果 textarea 向下调整大小并出现滚动，则会在下面的旧示例中看到不需要的效果。
My ugly solution was to add a div inside the overflow-y:auto-div, that had display:inline-block, and to add yet another small inline-block div after it, that was 19 pixels wide (reserved for scrollbar) and a pixel high. That little div would appear beside the real div when the browser resized the div to the content, and when the scrollbar appear, the small div is pushed down under the real div, and the real div keeps it's with. It will cause a one pixel bottom "margin", but hopefully not a problem. When no scrollbar ppears, there is 19 pixel of unused space beside the real div, as described in the Question.
我丑陋的解决方案是在溢出 y:auto-div 中添加一个 div，它有 display:inline-block，然后在它后面添加另一个小的 inline-block div，它是 19 像素宽（为滚动条保留）和一个像素高。当浏览器将div调整为内容时，那个小div会出现在真实div旁边，当滚动条出现时，小div被向下推到真实div下，真实div保持不变。它会导致一个像素的底部“边距”，但希望不是问题。当没有滚动条出现时，真实div旁边有19个像素的未使用空间，如问题所述。
(The outermost div is just there to replicate my setup/problem.)
（最外面的 div 只是为了复制我的设置/问题。）
Old:
老的：
<div style="display:inline-block">
<div style="max-height:120px; overflow-y:auto; border:1px solid gray">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
</div>
<br>
New:
新的：
<div style="display:inline-block">
<div style="max-height:150px;overflow-y:auto; border:1px solid gray">
<div style="display:inline-block">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
<div style="display:inline-block; width:19px; height:1px"></div>
</div>
</div>
<br>
回答by wallop
The problem is once you hover over the container and the scrollbar appears, then the content width shrinks. So even if you use a nested container whose width is equal to the container minus its scrollbar, the width of nested container will also shrink.
问题是一旦您将鼠标悬停在容器上并出现滚动条，内容宽度就会缩小。因此，即使您使用宽度等于容器减去其滚动条的嵌套容器，嵌套容器的宽度也会缩小。
One solution is to increase the size of the contents by the width of the scrollbar on hover. Here is a solution that doesn't need to use any nested outer containers (categoryContis the scrolling container and each menuBlockis one of the items to be scrolled):
一种解决方案是通过悬停时滚动条的宽度来增加内容的大小。这是一个不需要使用任何嵌套外部容器的解决方案（categoryCont是滚动容器，每个容器menuBlock都是要滚动的项目之一）：
<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
<div class="menuBlock" style="width:200px">a</div>
<div class="menuBlock" style="width:200px">b</div>
<div class="menuBlock" style="width:200px">c</div>
...
</div>
<style type="text/css">
#categoryCont:hover{
overflow-y: auto;
}
#categoryCont:hover .menuBlock{
/* Increase size of menu block when scrollbar appears */
width: 218px; /* Adjust for width of scroll bar. */
}
</style>
One issue with the above is that the width of scrollbar differs slightly in different browsers. One of the following should help:
上面的一个问题是滚动条的宽度在不同的浏览器中略有不同。以下方法之一应该会有所帮助：
- By using px
- 通过使用 px
Make the content an absolute value with left indent as an absolute value
使内容为绝对值，左缩进为绝对值
<div class="menuBlock" style="width:200px">
a
</div>
changes to
更改为
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute;
left:70px;
}
</style>
- By using %
- 通过使用 ％
You need both CSS and jQuery(First step is same)
你需要 CSS 和 jQuery（第一步是一样的）
<div class="menuBlock" style="width:200px">
a
</div>
changes to
更改为
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute; /* This one does not use 'left' */
}
</style>
<script>
// Indent left 30% because container width remains same but content width changes
var leftIndent = (30/100) * $("#categoryCont").width();
$(".menuBlock span").css({"left":leftIndent});
</script>
