当滚动条出现时HTML/CSS在整个网站上缩放div

我遇到了这样的问题：当页面没有完全看到时，div没有缩放整个页面，即滚动条出现在底部。当滚动条出现时HTML/CSS在整个网站上缩放div

秤罚款：

enter image description here

看到时不判罚尺度部分太小：

enter image description here

如何这个问题能解决？这里的小提琴：http://jsfiddle.net/gdztn/29/

澄清：内的div 必须始终是800像素宽，而的outter DIV应该在扩展的整个宽度的页面。正如您在第二张图片中看到的，当滚动条出现时，外部div未到达页面的右端。

谢谢！

来源

2012-03-12 Niklas R

我很困惑你正在努力完成什么。你只是想'#head div：first-child'永远填满视口的全部宽度吗？如果是这样，为'#head div：first-child'设置'width：100％'就像这样：http://jsfiddle.net/gdztn/35/ – cmw 2012-03-12 19:55:53

滚动条出现因为你有div：第一个孩子的宽度设置为固定800px。将其更改为％，以免看到滚动条。 – 2012-03-12 19:57:54

或者，如果您希望'＃head'始终为800px宽，并且为其子元素'div'元素填充完整宽度，请将'＃head'的'width'属性更改为800px，并将子div的width属性更改为100 ％：http://jsfiddle.net/gdztn/36/ – cmw 2012-03-12 19:58:18

问题是，#head宽度是100％，内部div具有固定宽度。如果你缩小页面，它仍然是100％，但比内部div小。就像拥有一个较小的容器和一个溢出的超大内容。

来解决这个问题，你应该设置#head的min-width，以防止它收缩比内DIV较小，像min-width: 850px

http://jsfiddle.net/gdztn/43/

编辑：也#head删除position:absolute。如果实际上需要绝对，然后添加width:100%

来源

2012-03-12 20:42:26 Joseph

这是大部分的途径。不过设置'min-width'会导致'＃head'不能跨越整个宽度，除非它<= 850px。为了解决这个问题，在定义min-width之后，将'width：100％'添加到'＃head'。 http://jsfiddle.net/gdztn/42/ – cmw 2012-03-12 21:34:28

'＃head'将始终为100％，因为'min-width'只是设置最小宽度而不是宽度本身。另外，'div'元素是块级元素。除非它们浮动，给定宽度或从流中取出（绝对位置/固定位置），否则它们始终是100％ – Joseph 2012-03-12 22:12:35

这看起来对绝对定位的div不是真的，就像在这个例子中，包括在jsfiddle中提供。拉伸框架向左扩大“结果”面板，你会看到'＃头部'不会增长超过850px，除非被告知这样做。 – cmw 2012-03-12 22:21:44

当滚动条出现时HTML/CSS在整个网站上缩放div

回答

相关问题