草庐IT

Viewport

全部标签

css - 视口(viewport)宽度导致背景无法按预期显示

我遇到了一个问题,当视口(viewport)缩小到小于为我的某些元素指定的尺寸时,背景颜色会出现意外行为。虽然滚动条显示正确,但背景不是我所期望的。当视口(viewport)与预期一样大或更大时,背景会按预期运行。当用Firebug检查页面元素时,似乎body元素没有拉伸(stretch),即使它里面的内容是。是什么导致背景出现这种行为?我已经提供了我认为相关的html和CSS,但如果我遗漏了什么,请告诉我。缩小视口(viewport)示例放大的视口(viewport)示例CSShtml{background:#A37C45;}body{background:#55688Aurl(".

css - BODY 背景图像在浏览器视口(viewport)中被截断

已解决我使用了下面Roman提出的解决方案,基于添加一个额外的DIV和position:absolute,我在IE7、IE8、IE9、Chrome和Firefox中测试了它,似乎工作正常!所以布局现在有3个完整的背景图像(我需要的),甚至你可以使用BODYbg来处理它会被截断到浏览器的视口(viewport)高度(仍然可能是在某些情况下很有用),带有“粘性页脚”的“三个半”背景图像:)我发现唯一的缺点是#footerContent中的链接不是“可点击的”,我使用此容器的position:relative解决了这个问题。我对我提供的示例进行了更改并将其上传到我的Dropbox,以防其他人

css - BODY 背景图像在浏览器视口(viewport)中被截断

已解决我使用了下面Roman提出的解决方案,基于添加一个额外的DIV和position:absolute,我在IE7、IE8、IE9、Chrome和Firefox中测试了它,似乎工作正常!所以布局现在有3个完整的背景图像(我需要的),甚至你可以使用BODYbg来处理它会被截断到浏览器的视口(viewport)高度(仍然可能是在某些情况下很有用),带有“粘性页脚”的“三个半”背景图像:)我发现唯一的缺点是#footerContent中的链接不是“可点击的”,我使用此容器的position:relative解决了这个问题。我对我提供的示例进行了更改并将其上传到我的Dropbox,以防其他人

css - 网页中的可滚动容器

我想在带有滚动条的网页内创建一个视口(viewport)。在此视口(viewport)中,我想将图像拼贴放置在相对于彼此的任意偏移处。我添加的第一张图片应该在视口(viewport)中居中。它可能没有视口(viewport)那么大。随着时间的推移添加其他图像,它们是来自其他图像的一些极坐标。我可以将极坐标转换为XY偏移量。当我添加图像时,我可能希望它们位于所有其他图像的左侧或位于所有其他图像之上等等;我可以使用负偏移量吗?视口(viewport)上的滚动条能否自动滚动到子项使用的坐标范围,而不是从0,0开始?我为视口(viewport)使用哪个容器类和哪些CSS设置?我使用什么CSS位

css - 网页中的可滚动容器

我想在带有滚动条的网页内创建一个视口(viewport)。在此视口(viewport)中,我想将图像拼贴放置在相对于彼此的任意偏移处。我添加的第一张图片应该在视口(viewport)中居中。它可能没有视口(viewport)那么大。随着时间的推移添加其他图像,它们是来自其他图像的一些极坐标。我可以将极坐标转换为XY偏移量。当我添加图像时,我可能希望它们位于所有其他图像的左侧或位于所有其他图像之上等等;我可以使用负偏移量吗?视口(viewport)上的滚动条能否自动滚动到子项使用的坐标范围,而不是从0,0开始?我为视口(viewport)使用哪个容器类和哪些CSS设置?我使用什么CSS位

html - CSS - 使用 CSS 的移动屏幕的百分比高度

我猜这个问题的答案是否定的-但是否有一种聪明的方法来计算移动屏幕的2/3高度?我需要一个包含背景图片的标题div,无论设备如何,它都占据屏幕高度的2/3-如果可能的话,一个干净的纯CSS解决方案将是理想的。目前我有和以下LESS样式-.twoThirds{height:66%;@media(max-width:766px){height:200px;}margin:0;padding:0;width:auto;img{width:100%;height:auto;}} 最佳答案 如果屏幕是指视口(viewport),那么您可以使用视

html - CSS - 使用 CSS 的移动屏幕的百分比高度

我猜这个问题的答案是否定的-但是否有一种聪明的方法来计算移动屏幕的2/3高度?我需要一个包含背景图片的标题div,无论设备如何,它都占据屏幕高度的2/3-如果可能的话,一个干净的纯CSS解决方案将是理想的。目前我有和以下LESS样式-.twoThirds{height:66%;@media(max-width:766px){height:200px;}margin:0;padding:0;width:auto;img{width:100%;height:auto;}} 最佳答案 如果屏幕是指视口(viewport),那么您可以使用视

html - 使 div 的高度为视口(viewport)高度的 100% 或页面的整个高度

如果您看一下这个jsfiddle示例:http://jsfiddle.net/2YbpZ/您可以看到sidebar和content元素都延伸到了视口(viewport)的底部。这就是我想要的。但是,当给定一些拉伸(stretch)页面并需要用户滚动的内容时:http://jsfiddle.net/p6qGg/sidebar和contentdiv在视口(viewport)底部被截断。我知道为什么会发生这种情况,因为100%指的是父元素的整个高度,在本例中是视口(viewport),但是当我更改标记以使两个元素周围有一个包装div时并设置min-height:100%这会发生:http:/

html - 使 div 的高度为视口(viewport)高度的 100% 或页面的整个高度

如果您看一下这个jsfiddle示例:http://jsfiddle.net/2YbpZ/您可以看到sidebar和content元素都延伸到了视口(viewport)的底部。这就是我想要的。但是,当给定一些拉伸(stretch)页面并需要用户滚动的内容时:http://jsfiddle.net/p6qGg/sidebar和contentdiv在视口(viewport)底部被截断。我知道为什么会发生这种情况,因为100%指的是父元素的整个高度,在本例中是视口(viewport),但是当我更改标记以使两个元素周围有一个包装div时并设置min-height:100%这会发生:http:/

html - 禁用固定视口(viewport)大小的移动设备缩放

我正在尝试禁用移动设备上的缩放功能。我知道这段代码会起作用。但就我而言,我无法选择使用“width=device-width”。我必须将视口(viewport)大小设置为480px,所以我使用以下代码但我在移动设备上看到了一个放大的页面View,我可以将其缩小。 最佳答案 使用“target-densitydpi=device-dpi”和代码解决了我的问题。感谢DaveRook 关于html-禁用固定视口(viewport)大小的移动设备缩放,我们在StackOverflow上找到一个类