相关疑难解决方法(0)

我有一个有两列的布局 - 左边div和右边div.

右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.

我试过了height:100%,min-height:100%;等等

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{ …

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

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

在编写网站代码时，我偶然发现了一些奇怪的东西。

这是我的代码：

的HTML

<div id='a'><div id='b'></div></div>

的CSS

html{height:100%}
body
{
    margin: 0;
    height: 100%;
    background: green;
    padding: 0 5%;
}
#a
{
    height: 100%;
    background: blue;
    text-align: center;
}
#b
{
    display: inline-block;
    height: 100%;
    background: red;
    width: 50%;
}

还有一个JSFiddle，以防万一：http : //jsfiddle.net/ud3y1vh2/

问题是，即使假定没有元素溢出，也会出现不必要的垂直滚动条。我熟悉导致每个元素之间出现空格的常规两行内嵌代码相邻问题，但这似乎很难破解。

我想到的是：

• 删除HTML中的所有空格
• overflow:hidden启用#a-有效，但无法用于我的网站（用户必须能够在需要时滚动内容）
• font-size:0上#a-工作，但不能用的，因为我的网站使用emS代表上浆#a等元素。对我来说不是一个可行的解决方案。
• 制作#b块状元素或降低其高度-可行，但对我的网站不可行。

因此，如果您能提出有关如何删除滚动条（或更确切地说，删除滚动条的原因）的想法，我想听听他们的意见。