相关疑难解决方法(0)

我有一个元素,需要它的宽度没有(!)垂直滚动条.

Firebug告诉我身体宽度是1280px.

这些都可以在Firefox中正常工作:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

他们都返回1263px,这是我正在寻找的价值.

但是所有其他浏览器都给我1280px.

是否有跨浏览器的方式来获得没有(!)垂直滚动条的全屏宽度？

说你有这个:

html, body {margin: 0; padding: 0}
.box {width: 100vw; height: 100vh}

<div class="box">Screen 1</div>

你会得到一些填充屏幕的东西,没有滚动条.但添加另一个:

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

您不仅可以获得垂直滚动条(预期),还可以获得轻微的水平滚动条.

我意识到你可以省略宽度,或者将其设置为宽度:100%,但我很好奇为什么会发生这种情况.是不是100vw应该是"100%的视口宽度"？

我正试图检测我的document身高何时发生变化.一旦它,我需要运行一些功能来帮助组织我的页面布局.

我不是在找window.onresize.我需要整个文档,它比窗口大.

我如何观察这种变化？

这可能是已经解决了几十次的事情的变化,但CSS真的让我觉得自己像个傻瓜.

我正在尝试构建一个可以通过各种方式定位和调整大小的小部件.这是一个非常简单的布局 - 固定高度的标题,固定高度的页脚,以及占据剩余空间的主体.整体宽度和高度各不相同.身体的内容需要滚动.我有整体容器,页眉,页脚和身体尺寸确定.

但我想要的是身体在需要时滚动当滚动条出现时不向左缩小内容.也就是说,我希望身体尽可能宽,以便滚动它所需的滚动条,这样当它需要滚动时就没有收缩.实际上,我想要这个:

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

我希望可以滚动的内容尽可能宽,以减少潜在的滚动条宽度(|*|区域).

我现在拥有的是这样的:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

我已经尝试了边距,填充,甚至是最内部div的%-width和所有"做转移"的事情.我还需要这个在FF3,IE7/8和(幻想？)IE6中工作.

我想计算滚动条的宽度，以便在 CSScalc()声明中使用结果。

目前，我假设滚动条的宽度始终为17px，如下所示：

body { 
    width:calc(100vw - 17px); 
}
.container { 
    max-width:calc(100vw - 17px); 
}

问题是当您选择不同的浏览器缩放百分比时，滚动条的宽度会发生变化。所以我想使用计算结果来做一些事情：

body { 
    width:calc(100vw - CALCULATED SCROLL-BAR WIDTH); 
}
.container { 
    max-width:calc(100vw - CALCULATED SCROLL-BAR WIDTH); 
}

编辑：我现在已经在这个问题的帮助下解决了这个问题

用于计算滚动条宽度的 JavaScript（不过，我发现您需要一个时间间隔才能使其自动更新）：

function getScrollbarWidth() {
  var outer = document.createElement("div");
  outer.style.visibility = "hidden";
  outer.style.width = "100px";
  outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

  document.body.appendChild(outer);

  var widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = "scroll";

  // add innerdiv
  var inner = document.createElement("div"); …

我有一个 div 标签，我意识到它没有像它应该的那样填充 100% 的高度。

我的代码：

#container {
  width: 100vw;
  height: 100vh;
  background: purple;
}

body {
  margin: 0px;
}

<div id="container"></div>

<div id="container"></div>

发生了什么？

好吧，如果我只有上面的这段代码片段，我当然会将 div 占据 100% 的视口！问题是我的页面上不仅有这个代码，我还有更多的东西，我在body标签里面插入了这个代码部分，在body标签里面的某个“地方”，也就是说，我插入了一些元素，并且这些元素有这个div后，但是不占，100%的视口观察它是怎么回事

结果在您的页面上的视觉效果如何？

我滚动了页面，但我的 div 仍然占据整个视口的 100%。我不正确吗？如果这应该发生，为什么不发生？

说明：伙计们，我发现了这个问题，但我不知道如何解决它，好吧，事情是这样的，当容器 div 下方或上方有元素时，div 不会占据 100% 的视口，看这个图像并查看：

我使用的代码实现了这一点：

我的代码 HTML：

body {
  color: red;
  background: green;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: purple;
}

p {
  font-size: 20pt;
}

<div id="container"></div>
<p>ksksks</p>

上图中发生的情况与我的页面上发生的问题相同，即如果页面上没有元素，div 仅填充视口高度的 100%，而我希望能够使高度为 100%即使在页面上有元素的视口。 …

网站底部的页脚后面似乎有随机的空白，但它只在 IE 和 Firefox 中显示。该网站在 Safari 和 Chrome 中运行良好。当我尝试使用检查元素时，空白似乎不属于任何标签。它似乎也不与任何页脚标签相关，因为删除它们并没有改变任何东西。网站链接为： http: //www.insightdatascience.com。

我查看了大量答案，但似乎没有一个专门适合我的网站。谢谢！