我正在尝试制作一个基于JQuery的通用javascript对话框类，以创建以屏幕为中心的div弹出窗口。在所有常见的浏览器中实现这一点很简单。对于移动平台，会出现视口(viewport)的问题；可见视口(viewport)(这是您当前看到的站点的“查看窗口”，放大或不放大)和布局视口(viewport)(底层页面的尺寸，或者换句话说，CSS视口(viewport))的区别。对于Iphone，我已经能够使用DOM属性window.innerWidth和window.innerHeight来调整缩放的居中，并使用pageXOffset/pageYOffset来调整平移，其中://Getd
尝试创建一个始终固定在网站顶部的菜单。遵循zurb.foundation的文档，但.sticky的行为总是出乎意料。或者也许我没有得到一些明显的信息？请在此处检查重建:http://codepen.io/mister-hansen/pen/wMgrPm如果网站向下滚动，并恰好达到初始视口(viewport)的高度，粘性插件会将元素.sticky从is-stuckis-at-top更改为:.is-anchored.is-at-bottom所以.sticky消失了。谢谢。更新文档的第一部分:foundation.zurb.com/sites/docs/sticky.html解释了所描述的行
烦人的问题!当我放大视口(viewport)窗口(在Firefox、chrome中发生)然后向右水平滚动时，我的背景图像被剪裁图像最能描述正在发生的事情:放大-图像仅与视口(viewport)一样宽缩小出路-没有出现问题以下是我的CSS中可能相关的一些部分:article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{width:100%;}header#header{width:100%;}header#header#background-image{
我的帖子是关于http://www.thepostboard.net的我需要让当前覆盖100%视口(viewport)的黑框改为覆盖整个页面。只有当您的屏幕需要滚动条才能查看网站时，您才会注意到这一点——否则它看起来不错。我将覆盖的div设置为:position:absolute;height:100%;width:100%;我也有body设置为:height:100%;margin:0px0px;padding:0px;0px;但出于某种原因，如果我在笔记本电脑上向下滚动，我会看到DIV的边缘，并且它下面没有任何东西被阻挡。这样做的目的是为网站创建一个自定义灯箱。我已禁用使框变暗的J
我使用Disqus在我的Ghost模板上发表评论，但我遇到了麻烦。Disqus里面的图片如果它们不在视口(viewport)内，请不要加载。调试我可以找到:如果我删除overflow:auto来自.surface-container图像出现。如果我删除height:100%来自.surface-container图像出现。如果您缩小浏览器，则会显示图像。但是，如果我删除任何这些属性，抽屉将无法正常工作，如果您打开抽屉，网站会向上滚动。这似乎是浏览器问题，而不是与css相关的问题:/FiddleRealScenario 最佳答案 试试
我无法理解如何防止srcset在屏幕768px上加载任何图像。我试过下面的代码，但sizes属性似乎与您想象的不一样。下面在所有屏幕尺寸上加载1024.jpg:或者图片元素，如果它能接受emptysrcset但它只是“提示”浏览器应该加载哪个图像。 最佳答案 另一个答案并不令人满意。通常，使用srcset时，您可以让浏览器选择图像候选者。虽然您可以假设哪些图像是在某些设备上拍摄的。你没有任何控制权。srcset中的每张图片都可以拍摄。所以如果你想控制，什么被使用或不被使用，你需要使用picture元素。这里有3个例子。如果视口(vi
我需要一种更好的方法来计算可滚动div的视口(viewport)。一般情况下，我会使用以下属性:(scrollLeft,scrollTop,clientWidth,clientHeight)使用这些数字，我可以准确地确定可滚动DOM元素的视口(viewport)的哪一部分当前可见，我使用此信息异步加载用户在水平或垂直滚动到内容时按需可见的内容。当DIV的内容比较多时，这样可以避免由于加载过多的DOM元素而导致浏览器崩溃的尴尬bug。我的组件现在已经运行了一段时间，没有任何问题，我们在这个版本中引入了RTL支持。现在由于浏览器不一致，一切都被抛弃了。为了演示，我创建了一个简单示例，它
我想在浏览器中显示一张图片:如果图像小于浏览器视口(viewport)，则图像居中水平和垂直。如果图像比视口(viewport)大，图像将按比例缩小以填充尽可能多的视口(viewport)而不调整纵横比图片。同样，图像水平和垂直居中。我不想使用JavaScript；执行此操作的最佳/最具语义的HTML和CSS是什么？更新我被要求澄清语义:图像是内容；HTML中唯一的内容。解决方案@GionaF的想法让我找到了一个快乐(而且非常简单)的解决方案:HTMLCSSimg{max-width:100%;max-height:100%;position:absolute;top:0;left:0
一段时间以来，我一直在使用this创建Angular丝带，到目前为止它一直运行良好:body{margin:10%}img{border-radius:0.5vw;}.picture{position:relative;}.ribbon{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right;}.ribbonspan{font-size:10px;font-weight:bold;color:#FFF;text-transform:upp
我正在将min-height:100vh;应用于flexbox容器，当我使用justify-content:space-around;时，我得到了一个垂直滚动条。p>我不想强制高度，但我不明白为什么滚动条在那里，因为内容的尺寸小于视口(viewport)。*{padding:0;margin:0;box-sizing:border-box;}body{margin:0;padding:0;}.wrapper{min-height:100vh;display:flex;flex-direction:column;justify-content:space-around;}min-heig
