如果窗口宽度比内容的其余部分窄，div不会拉伸页面的100％宽度 [英] div doesn't stretch 100% width of a page if window width narrower then the rest of the content

问题描述

如果我调整浏览器窗口（我的案例中的最新的Chrome），所以它获得水平滚动条，然后标题div获得切断。在这种情况下，向右滚动会显示一些空白区域。这是因为主内容除了头部具有固定宽度。

If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.

但是标题div有100％的宽度，div在默认情况下也是一个块元素，所以它应该自己伸展到页面宽度的100％。为什么不这样做？这不应该是默认行为吗？为什么StackOverflow团队没有解决这个问题？

But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?

我在很多页面上发现的问题，包括StackOverflow：

The problem I found on many pages, including StackOverflow:

一直在谷歌搜索，甚至找到一个问题的解决方案，但不够满意。解决方案是设置 min-width属性为该内容的宽度。但是没有更好的解决方案吗？

So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?

我在寻找一个更好的解决方案，如果有的话？另外，我在寻找一个合理的解释为什么div的默认行为拉伸100％的宽度不适用这里？

I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?

推荐答案

检查body元素，您会看到它只延伸到视口。 topbar-wrapper是980px固定宽度，其父与黑色背景，topbar，是100％的身体。 topbar还需要一个980像素的宽度，或者body元素需要min-width：980px ...这里在StackOverflow网站上（看起来像你发现了一个错误）

Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)

这是我经常发现的问题，我从自由职业者审查，他们忘记缩小浏览器下来。如果网站不流动，并且有固定宽度的元素，全宽度部分通常需要最小宽度。

This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.

这篇关于如果窗口宽度比内容的其余部分窄，div不会拉伸页面的100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！