相关疑难解决方法(0)

不幸的100vh是,并不总是与100%浏览器高度相同,如下例所示.

html,
body {
    height: 100%;
}

body {
    overflow: scroll;
}

.vh {
    background-color: blue;
    float: left;
    height: 50vh;
    width: 100px;
}

.pc {
    background-color: green;
    float: left;
    height: 50%;
    width: 100px;
}

<div class="vh"></div>
<div class="pc"></div>

这个问题在iPhone 6+上更为明显,上部位置栏和下部导航栏如何在滚动时展开和收缩,但不包括在计算中100vh.

100%可以通过window.innerHeight在JS中使用来获取高度的实际值.

有没有一种方便的方法来计算100vhJS中像素的当前转换？

我试图避免需要生成带内联样式的虚拟元素来计算100vh.

出于此问题的目的,假设一个恶意环境,其中max-width或max-height可能产生不正确的值,并且100vh页面上没有任何现有元素.基本上,假设任何可能出错的东西都有本机浏览器功能,但保证是干净的.

到目前为止我提出的最好的是:

function vh() {
    var div,
        h;
    div = document.createElement('div');
    div.style.height = '100vh';
    div.style.maxHeight = …

我想计算滚动条的宽度，以便在 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"); …

类似的问题,没有一个很好的答案:
我怎么能包括"overflow:auto;"的宽度 动态大小的绝对div中的滚动条？

我有一个<div>固定的高度,作为一个宽度均匀的按钮菜单.用户可以从菜单中添加/删除按钮.当有多个按钮可以垂直放入时<div>,我希望它可以滚动 - 所以我正在使用overflow-y:auto,当内容太大时确实会添加一个滚动条y.不幸的是,当滚动条显示时,它会重叠菜单按钮,并添加一个水平滚动条 - 最大的问题是它看起来很糟糕.

有没有"正确"的方法来解决这个问题？我喜欢学习一些风格技巧,使其正常工作(即滚动条位于div之外而不是内部,或div在必要时自动扩展以容纳滚动条).如果javascript是必要的,那很好 - 我已经在使用jQuery- 在这种情况下,正确的事件是检测正在添加/删除的滚动条,以及如何确保在跨浏览器中使用正确的宽度/跨式的方式？

JSFiddle:http://jsfiddle.net/vAsdJ/

HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>

CSS:
#menu{
    background:grey;
    height:150px;
    overflow-y:auto;
    float:left;
}

Script:
$('#add').button().click(function(){
    var d = $('<div/>');
    var b = $('<button type="button">Test</button>');
    d.appendTo($('#menu'));
    b.button().appendTo(d);
});

如何获得浏览器滚动条高度？JS是否有针对此案例的内置函数？有人请帮我解决这个问题.