我正在寻找一个基于CSS的网页模板，其中主要内容div在其内容只有几行时占据了视口(viewport)的整个高度(减去页眉和页脚高度)。页脚应该位于视口(viewport)的底部，而不是在内容的正下方，它更多地位于视口(viewport)的中间。内容区域需要垂直扩展才能与页脚顶部连接。如果内容需要比视口(viewport)更多的空间，那么页脚可以作为标准网页设计位于网页底部(而不是视口(viewport)底部)。感谢指向特定链接或示例代码的链接。不要提到模板网站，让我在那里搜索。必须至少在IE6和FF中工作。如果需要JavaScript，只要浏览器不支持JS就可以，它默认将页脚放在内容

我正在写一个HTML5适用于iOS的应用程序.经过this文章，我想到了做一些性能优化通过在DOM中保留一些HTML节点但不要将它们保留在viewport中.出于演示目的，我一直使用以下代码(我的实际工作场景将有更多)functionfunc(){vardiv1=document.getElementById('div1');vardiv2=document.getElementById('div2');div1.style.cssFloat="";div1.style.visibility="hidden";div1.style.left="-100%";div2.style.lef

在我的CSS中，我尝试使用:link、:visited、:hover将导航栏a元素的字体颜色设置为黑色>和:active选择器，但没有任何改变。我认为我的标题已经足够清楚地说明了我的问题，但这里有一个指向我的网站的链接，我正在尝试修复它:http://students.washington.edu/jgb93/info343/portfolio/#/基本上，如果您尝试单击导航栏中的其中一个链接，它会发生变化，它会暂时变为蓝色。如果单击视口(viewport)上的其他任何地方，蓝色将变回我想要的黑色。关于造成这种情况的原因有什么建议吗？这就是我在HTML中为导航栏所做的全部工作，其余部分

我有一张1920x550px的大背景图片，我想在其正下方放置一个div。因为我不知道如何显示完整图像，所以我使用了一个肮脏的技巧，实际上用透明部分填充了图像，所以它是一个1920x1080图像，然后我用这个显示它:.bg-image-big{background:url(../images/header-bg-big.png)no-repeatcentercenterfixed;background-color:#f7f7f7;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cove

我不是前端开发人员，但我正在编写一个包含图像的简单单页网站。我已经创建了这个图像的几个版本，以尽量减少在小屏幕设备上下载的比特。该图像应该水平“扩展”，因此我还创建了一些应该水平重复的背景图像。请参阅下面的模型:在我写的代码下面。这是正确的方法吗？我的代码中是否存在任何错误，或者这是使用视口(viewport)的正确方法吗？虽然它在我的320pxiPhone屏幕上运行良好，但我无法让320px版本在我的桌面浏览器上运行。总的来说我不满意。HTML:CSS:#image{background-image:url("r320w.png");background-repeat:repeat;

在使用Safari的iPad上，转到此页面:http://ifelse.org/projects/errors/viewport/test.html这是来源:ViewportTestbody{padding:0;margin:0;}#test{width:1024px;height:500px;border:3pxsolid#ccc;}Thisis1024witha3pxborder,sodevicewidthis1030.WorkswhenviewinginMobileSafari.DoesnotworkifyouBookmarkittotheHomeScreenandopenfro

一两个月前，我看到一个站点将anchor固定在页面的右侧，当页面滚动时它不会滚动。仅此一点对CSS来说并不难。但是在那个站点上，固定anchor是根据页面中的部分标题动态生成的。并且它们相对于它们在文档中的位置按比例分布在页面的右侧。从本质上讲，它创建了整个文档的迷你map，直观地概述了文档中的内容以及文档各部分之间的间距，所有这些都在当前视口(viewport)内。您可以很快看到每个部分之间的关​​系有多大。也许我应该称它为目录而不是小map。我相信这是在某种API的文档页面上。我认为它非常适合导航，并且想为我需要做的一些文档构建类似的东西。在某种程度上，它让我想起了SublimeT

在我的网站上，部分有以下代码:这使我的网页在移动设备上显示良好(我不能使用width=devicewidth因为流动元素的宽度为100%-这会严重破坏页面)。但是，有一个副作用。在某些浏览器上，例如IEMobile10，它会使某些字体变大。有趣的是，我网站上的元素到处都使用完全相同的CSS，而且只有其中一些元素受此影响。我不知道为什么会这样。有什么办法可以阻止浏览器放大字体并使其逐像素保持与桌面上的相同？更改元标记？在CSS中添加一些东西来阻止它？我一直在寻找解决方案很长一段时间，但到目前为止没有效果。我将非常感谢在这方面的任何帮助。提前致谢! 最佳答案

Thisarticle表示元素的高度由浏览器计算，并且始终等于视口(viewport)的高度，seethepicture供快速引用。所以在thisstickyfooterexample页脚绝对位于元素内的底部，如果内容超过视口(viewport)高度的100%，则页脚向下移动。如果它向下移动，我假设元素的高度大于视口(viewport)的100%，这与开头提到的文章相矛盾。我错过了什么？更新基于HashemQolami的回答:初始包含block的高度和宽度由浏览器自动计算，并且始终等于视口(viewport)尺寸。HTML元素的高度是相对于它的内容的，但是如果我们给它明确的100%高度

不久前我在一家帆船公司制作了一个WordPress网站，xssailing.com并且当前将视口(viewport)设置为:该站点在计算机上运行良好，我可以在iPhone/iPad上进行缩放。当我用我的kindle访问该网站时，我无法像在其他网站上那样进行缩放。有什么想法吗？谢谢! 最佳答案 你是对的，它不会缩放。使用默认浏览器在NexusS上测试。Safari为这个标签定义了非常愚蠢的默认值(宽度正好是960像素，正好适合不再生产的旧iPhone)。因此，您需要明确指定minimum-scale。通过指定所有三个缩放参数(而不是3