天道酬勤,学无止境

Redraw page border on scroll

My webpage content is centered in the middle using auto margin and has a black border on both sides (left and right).

If I scroll down, the border doesn't update. So if I scroll down a bit the border will only reach half way down. How do i fix this?

Edit: The height of the content div is set to 100% and on initial load the border does go all the way down, this problem only occurs when scrolling.

评论

The height of the content div is set to 100%

This is likely your problem. Because you've set the div to height: 100% it's only as tall as the viewport. (Even though the content overflows out of it.)

Try: min-height: 100%

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在Chrome / Mac上强制DOM重绘/刷新(Force DOM redraw/refresh on Chrome/Mac)
    问题 Chrome有时会不正确地显示或完全不显示完全有效的HTML / CSS。 通过DOM检查器进行挖掘通常足以使它意识到其方式的错误并正确重绘,因此可以证明标记是好的。 在我正在处理的项目中,这种情况经常发生(并且可以预测)到足以在某些情况下强制执行重绘的代码位置。 这适用于大多数浏览器/操作系统组合: el.style.cssText += ';-webkit-transform:rotateZ(0deg)' el.offsetHeight el.style.cssText += ';-webkit-transform:none' 如图所示,调整一些未使用的CSS属性,然后要求一些信息以强制重绘,然后取消调整该属性。 不幸的是,Mac版Chrome背后的聪明团队似乎找到了一种无需重新绘制即可获取offsetHeight的方法。 从而杀死本来有用的黑客。 到目前为止,我想出的在Chrome / Mac上获得相同效果的最好方法是: $(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000); 如图所示,实际上迫使元素跳一点,然后冷静一秒钟再跳回去。 更糟糕的是
  • 2020前端面试(一)-浏览器渲染机制篇
    点这里,欢迎关注 文章目录 1.一个页面从输入URL到加载显示完成,这个过程发生了什么?2. 重绘和重排(回流)(1)渲染树的生成过程:(2)回流:(3)重绘:(4)何时会触发回流和重绘(5)浏览器对于重排的优化机制:(6)减少重绘和重排:a.合并多次对DOM样式的修改:b.批量修改DOM:c.缓存布局信息,减少某些属性的使用:d.对于复杂的动画效果,应使用绝对定位让其脱离文档流:e.CSS3硬件加速f.不要使用table表格: 1.一个页面从输入URL到加载显示完成,这个过程发生了什么? https://segmentfault.com/a/1190000014872028?utm_source=sf-related 输入url地址域名解析(将域名解析为IP地址):查看浏览器DNS缓存==>本地DNS缓存==>路由器缓存==>ISP缓存(互联网服务提供商)>根域名服务器>顶级域名服务器==>权威域名服务器通过三次握手建立TCP/IP连接发送http请求服务器处理请求并返回HTTP报文浏览器解析渲染页面 网页的解析是交给渲染进程中的GUI渲染线程处理的。HTML解释器会将解析生成一棵DOM树,CSS解释器会将css代码解析生成为一棵CSSOM树。在解析的过程中,如果遇到js代码,则会将执行权交给js引擎线程处理,因为js引擎线程与GUI线程是互斥的,所以js的加载会阻塞页面的渲染
  • 实现平滑的“回到顶部”功能
    话不多说,直接切入正题。 实现平滑的回到顶部或者去到指定的位置,有两种实现方式 CSSJavaScript CSS实现 主要是通过CSS属性scroll-behavior来实现,我们来看代码: <!-- html --> <!DOCTYPE html> <html lang="zh-CN" id="html"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 设置需要滚动到的元素的 scroll-behavior 属性, 这里我们设置了 html 元素(一般来说,如果是回到顶部的话, 设置body和html的scroll-behavior属性,去到指定位置, 则设置那个元素的scroll-behavior属性) */ #html { scroll-behavior: smooth; } .to-top { display: block; position: fixed; width: 36px; height: 36px; bottom: 50px; right: 100px; background-color: #ddd; color: #fff
  • 具有动态修改页面内容的IE7相对/绝对定位错误(IE7 relative/absolute positioning bug with dynamically modified page content)
    问题 我想知道是否有人想知道如何解决IE7中的以下问题: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7 absolute positioning bug</title> <style type="text/css"> #panel { position: relative; border: solid 1px black; } #spacer { height: 100px; } #footer { position: absolute; bottom: 0px; } </style> <script type="text/javascript"> function toggle() { var spacer = document.getElementById("spacer"); var style = "block"; if (spacer.style.display == "block" || spacer.style.display == "") {
  • HTML5 画布油漆重绘 lineJoin 未四舍五入(HTML5 canvas paint redrawing lineJoin not rounded)
    问题 您好,我用撤消功能制作了一幅画,我将所有坐标写入数组,然后尝试撤消仅重绘而没有最后一个坐标,但在重绘画布参数时出现问题。 我使用lineJoin = "roind"但重绘后我看到没有圆.. 在我绘制时,这个结果是圆线开始和线结束: 撤消功能后没有轮开始和行结束的结果: 当我按坐标重新绘制所有绘图坐标时,我不知道在哪里消失我的圆线.. var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var points = []; var size = 10; var prevX = 0; var prevY = 0; var isCanDraw = false; $("#canvas").on("mousedown", function(e) { isCanDraw = true; prevX = e.clientX; prevY = e.clientY; points.push({x: prevX, y: prevY, size: size, mode: "begin"}); }); $("#canvas").on("mousemove", function(e) { if(isCanDraw) { stroke(e.clientX, e.clientY); points
  • Chrome重绘问题(Chrome redraw issue)
    问题 我在chrome中遇到了奇怪的重绘问题: 看到破损的右侧了吗? 这是具有单个背景img的div 。 的HTML <div id="resultsSortFilter> <!-- ... --> </div> 的CSS #resultsSortFilter { float: left; width: 712px; height: 109px; margin: 7px 0 0 8px; background: url('../images/search_sortfilter_bg.png') no-repeat; } 在任何其他浏览器中都没有问题仅发生在较新的版本上,我们阻止了此更新,以防止内部造成此问题。 似乎是在渲染完成之前通过上下滚动来触发的。 在多个站点上存在相同的问题 其他人看到了吗? 有人知道是什么原因造成的,或者Chrome打算对此做些什么? Chrome版本26.0.1410.64 m 更新 问题出在Windows和Mac OS上。 实际上,在Mac上似乎更糟。 我可能已将其进一步固定。 我们在包含许多大图像的页面上得到错误。 我想知道这是否与Chrome必须下载的数据大小有关? 这似乎使问题消失了(不称其为解决方案): “可能是较新版本的Chrome根本不喜欢您的GPU。我遇到了与您的GPU类似的问题,并通过关闭合成和3D加速功能解决了这些问题。
  • 『豪横,让面试官无题可问』☛第二期-Css让人忽视的面试题-----猛男,你还记得吗?
    引言 文章目录 引言1.谈一下为什么要初始化CSS样式?2.谈一下你对BFC规范的理解3.谈一下CSS3有哪些新增的特性?4.谈一下在页面上隐藏元素的方法有哪些?5.说说什么是重绘和重排?6.谈谈你对相对定位、绝对定位、固定定位的理解7.CSS选择器有哪些?哪些属性可以继承?8.CSS3新增伪类有哪些并简要描述?9.谈谈你理解的优雅降级和渐进增强?10.style标签写在body前和body后的区别是什么?11.什么是FOUC?你是如何避免FOUC的?12.用css创建一个三角形,并简述原理?13.谈一下清除浮动的几种方法14.谈一下css常用的布局方式有哪些?15.谈一下::before和:after中单冒号和双冒号的区别是什么,这两个伪元素有什么作用?16.谈一下CSS sprites的原理和优缺点分别是什么? 欢迎学习完第一期的猛男来和快活呀,讨论讨论、切磋切磋,来啊,豪横起来!!!喜欢的猛男,记得对我关注,点赞,评论讨论沃! 1.谈一下为什么要初始化CSS样式? 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异初始化样式会对 SEO 有一定的影响,不友好 2.谈一下你对BFC规范的理解 BFC是CSS中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外界的元素互不干扰。它不会影响外部的布±
  • Persisting scroll position in AngularJS after refresh
    I've got a web app I've written with AngularJS: http://asmor.com/anr This app is for helping to build decks for a particular game. When you add cards to your deck, they're added to a fixed-positioned div in the top right corner. That div has a dynamically-set max-height so that it won't be occluded by the bottom of the browser's window or by another fixed div in the bottom right corner of the page. If you hit the max height, the list of cards in the deck scrolls. See below: Now the problem is that when you add or remove a card from the deck while it's scrolled by clicking the red or green
  • HTML5 Canvas 失真(HTML5 Canvas distortion)
    问题 我正在尝试在将异步加载的动态大小的视频上包含一个画布元素。 在画布上,用户将能够拖动矩形选择框并调整其大小。 在我的 JS 文件中,我有一个监听器监视窗口并通过 canvas 元素的 .width 和 .height 属性将画布大小调整为视频的确切宽度和高度。 对于 JS 矩形选择代码,我正在关注这个 StackOverflow 问题的第一个答案中的小提琴:用鼠标单击和拖动绘制一个矩形 - javascript,但是,出于某种原因,当用户在页面上向下滚动时画布完全扭曲,矩形开始在离鼠标很远的地方绘制。 但是,当用户位于页面顶部时,矩形会在正确的位置绘制。 为什么会发生这种情况? 下面是我正在使用的一些 JS 代码: // Happens on mousedown event downCanvas: function(e) { $('.label-grid-canvas').css('cursor','crosshair'); this.isDrawing = true this.startX = parseInt(e.clientX - this.offsetX); this.startY = parseInt(e.clientY - this.offsetY); }, // Happens on mouseup event upCanvas: function(e) {
  • 刷新后在 AngularJS 中保持滚动位置(Persisting scroll position in AngularJS after refresh)
    问题 我有一个用 AngularJS 编写的网络应用程序:http://asmor.com/anr 此应用程序用于帮助构建特定游戏的套牌。 当你将卡片添加到你的牌组时,它们会被添加到右上角的一个固定位置的 div 中。 该 div 具有动态设置的最大高度,因此它不会被浏览器窗口的底部或页面右下角的另一个固定 div 遮挡。 如果你达到最大高度,牌组中的卡片列表就会滚动。 见下文: 现在的问题是,当您通过单击红色或绿色按钮滚动时从卡组中添加或删除卡时,Angular 会重新绘制卡组列表并将滚动重置回顶部。 为方便起见,这是我用于牌组列表的代码: <div id="deck" class="shown-{{ deck.notEmpty }} faction{{ deck.identity.faction }}"> <div class="deckStat cardTotal"> <strong class="valid-{{ deck.enoughCards }}">Cards:</strong> {{ deck.cardCount }} / {{ deck.minCards }} </div> <div class="deckStat agendaPointsTotal shown-{{ deck.isCorp }}"> <strong class="valid-{{ deck
  • ScrollView 中的 UIWebView 不会重绘(UIWebView within a ScrollView does not redraw)
    问题 我在 UIScrollView 中有 UIWebView。 然后当我滚动时,web 视图正确显示前两页,但只绘制页面的三分之一。 如果我点击 Web 视图,它会绘制内容,或者如果我在-scrollViewDidEndDecelerating调用-[UIWebView reload] ,它会显示内容。 有什么方法可以使 Web 视图正确绘制? 回答1 UIWebViews 不能同时加载。 您必须加载一个,等待它完成,然后加载下一个,依此类推。 您可以在计时器上执行此操作,或者等到滚动的 UIWebView 获得焦点后再加载数据。 回答2 所有 UIView 的大小限制为 1024x1024 像素。 这在 UIView 文档的概述部分的末尾进行了说明。 如果您的 Web 视图必须具有超过 1024 像素的内容,则必须将其从父滚动视图中取出并让它自行管理滚动。
  • Android Scroll详解(一):基础知识
     在前边的文章中,我们已经对Android触摸事件处理有了大致的了解,并且详细探讨了MotionEvent的相关用法。对之前文章中的知识还不是很了解的同学,请阅读《Android MotionEvent详解》  今天,我们就来探讨一下Android中界面滚动效果的相关机制,本篇文章主要讲解一下滚动相关的知识点,之后的文章会涉及实际的代码和原理。希望大家阅读完这篇文章之后,能够了解或者掌握一下知识:Android 视图的组成部分mScrollX和mScrollY对视图显示的影响scrollTo和scrollBy的使用invalidate和postInvalidate的区别View的mScrollX和mScrollY 我们都知道,View中有两个重要的成员变量,mScrollX,mScrollY.它们分别代表视图内容(view content)水平方向和竖直方向的滚动距离。我们可以通过setScrollX和setScrollY来个函数来改变它们的值,从而来滚动视图的内容。  在这里需要强调的是,mScrollX和mScrollY会导致视图内容(view content)变化,但是不会影响视图背景(background)。  看到这里同学们或许会有写疑问,视图的内容和背景有什么区别呢?视图还有哪些组成部分呢?  我们可以从View的draw方法中得知View的组成部分。// http:/
  • Create copy button in Javascript
    Hey am new web developer and I have been working on a project. I was working on a quote website. Firstly you visit my CodePen and visit my project. Please visit my CodePen website then answer or else you cannot understand the question or else I have written my project in the bottom. https://codepen.io/Akash11166666/pen/JjRzqzp As you saw in my pen there are many copy button under each quote, but they are not working. Although I have tried many Javascript but know of them work. Remember that the <div>,<p> and <button>Copy</button> elements for quotes are not in html because the are created by
  • 手把手教你打造一款轻量级canvas渲染引擎
    目录 背景配置化分析寻找更优方案 实现分析结果预览方案总览构建布局树和渲染树解析XML和构建CSSOMDOM 树与 CSSOM 树合并后形成渲染树计算布局树 渲染基础样式渲染重排和重绘事件实现滚动列表实现其他 调试及应用场景参考资料 背景 当我们开发一个canvas应用的时候,出于效率的考量,免不了要选择一个渲染引擎(比如PixiJS)或者更强大一点的游戏引擎(比如Cocos Creator、Layabox)。 渲染引擎通常会有Sprite的概念,一个完整的界面会由很多的Sprite组成,如果编写复杂一点的界面,代码里面会充斥创建精灵、设置精灵位置和样式的“重复代码”,最终我们得到了极致的渲染性能却牺牲了代码的可读性。 游戏引擎通常会有配套的IDE,界面通过拖拽即可生成,最终导出场景配置文件,这大大方便了UI开发,但是游戏引擎一般都很庞大,有时候我们仅仅想开发个好友排行榜。 基于以上分析,如果有一款渲染引擎,既能用配置文件的方式来表达界面,又可以做到轻量级,将会大大满足我们开发轻量级canvas应用的场景。 本文会详细介绍开发一款可配置化轻量级渲染引擎需要哪些事情,代码开源至Github:https://github.com/wechat-miniprogram/minigame-canvas-engine。 配置化分析 我们首先期望页面可配置化,来参考下Cocos
  • Listbox scrollbar thumb changes size when content is variable height
    I have a ListBox with many objects displayed, each of which can be a variable height, based on the number of values each object has. See my previous question that was answered here. Many objects are 5-lines high, while others are 1. The scroll bar in the ListBox does not appear to like this, probably due to the virtualization. While you scroll through, the thumb on the scroll bar will change its size, based on how many items are actually fitting into the box at that current moment. This makes the thumb very big at times, and very small at other times. Since this ListBox is also contained
  • 如何溢出:隐藏; & 容器上的边界半径导致容器内“绘制/渲染层”的大幅减慢,仅在 IE 上?(How does overflow: hidden; & border-radius on a container cause massive slowdowns to “Paint / Render Layer” within container, only on IE?)
    问题 我在 HTML/SVG javascript 驱动的小部件中的 IE(包括 IE11 的所有版本)上的性能不佳时遇到了很多麻烦,只有当小部件托管在某个页面上时。 在确定速度下降的主要原因是绘制/渲染层重绘,并用尽了我可以从 IE 开发人员工具中获得的这些信息后,我尝试一次又一次地关闭祖先类,直到性能提高; 然后,在识别类时,一次关闭一个样式规则。 我的整个问题似乎都归结为一个overflow: hidden; 在树上的几个 div 上统治一个祖先。 它产生的差异令人难以置信: overflow: hidden; 在树上,一个简单的用户交互(突出显示一个 SVG 路径,生成一个 HTML 文本标签,显示标签并相对于 SVG 路径和容器定位)最大化处理器,将 UI 帧速率降低到零并冻结一切死每次交互 1,000 到 4,000 毫秒。 无overflow: hidden; 在祖先上,它在几十毫秒内完成并且帧速率永远不会低于一半(非 IE 浏览器是相同的,无论overflow: hidden; )。 这是overflow: hidden;的配置文件overflow: hidden; 在祖先上,分析开启和关闭交互,过滤以绘制事件: 这是没有overflow: hidden;的配置文件overflow: hidden; 在祖先上,分析开启和关闭交互,过滤以绘制事件。
  • UILabel图层cornerRadius对性能产生负面影响(UILabel layer cornerRadius negatively impacting performance)
    问题 我创建了一个文档视图,该视图在角落显示页码。 页码是具有半透明背景色的uilabel,并且具有转角半径(使用view layer的cornerRadius属性)。 我将其定位在UIScrollView上方。 但是,这会使滚动变得生涩。 如果我删除cornerRadius ,性能会很好。 有什么我可以做的吗? 有什么更好的解决方案? 它似乎已经在UIWebView实现,而没有任何性能问题。 回答1 对于标签或带有圆角的视图,或带有滚动视图上的背景颜色和阴影的视图,解决方案非常简单: 最大的问题是来自masksToBounds图层选项。 这似乎会显着提高性能,但是标签似乎需要将此ON遮盖住圆角的背景颜色。 因此,要解决此问题,您需要改为设置标签图层的背景色并关闭masksToBounds。 第二个问题是默认行为是在可能的情况下重绘视图,而对于滚动视图上的静态或缓慢更改的项目,则完全没有必要。 在这里,我们只需设置layer.shouldRasterize = YES。 这将允许CA在滚动时“缓存”视图的栅格化版本以进行快速绘制(大概是通过硬件加速)。 您需要确保图层具有Alpha通道,否则栅格化将影响圆角的绘制。 我从来没有问题,因为我为背景色设置了Alpha,但是您可能需要检查一下情况。 这是一个示例UILabel,它设置为可在scollview上很好地工作: UILabel
  • 强制JavaScript在浏览器重绘之前运行*(jsFiddle示例)(Force javascript to run *before* browser redraw (jsFiddle example))
    问题 我正在使用HTML表构建一个基于Web的小应用程序。 该表的一个不寻常属性是,它的顶行和左列固定(类似于excel)。 我使用一些jQuery和CSS完成了此任务。 问题是,触发我的代码的jQuery事件是$(window).scroll事件,显然,大多数浏览器(Chrome和IE)在此事件调用的代码完成运行之前都会重新绘制页面。 结果,左列和顶行花费了一秒钟的时间来“追赶”表的其余部分。 我提供了一个精简的jsFiddle示例,以向您展示我的问题。 注意:当表格很小且(相对而言)没有内容时,滞后不是很明显。 不过,它就在那里(假设您没有使用Firefox)。 有什么办法可以消除这种滞后? 谢谢! 回答1 只是一个想法,但也许值得考虑:您可以尝试按照本文所述(或类似方式)使用requestAnimationFrame 。 这样可以解决更新/“滞后”问题。 回答2 我没有使它与滚动事件或requestAnimationFrame一起使用。 我最终要做的是附加到mousewheel事件,该事件在滚动和渲染发生之前触发。 如果滚动事件正在下降,我可以及时应用适当的类进行渲染。
  • 什么是重排和重绘
    当浏览器下载完页面所需元素(html标记,css层叠样式表,javascript,图片)之后,会生成两个东西:Dom树和渲染树。 Dom树 Dom树,主要是用来表示页面的Dom结构。 渲染树 渲染树主要是用来表示页面是如何进行渲染的。 Dom树中,除了隐藏节点,其余的节点需要与渲染树中的至少存在一个对应的节点。渲染树中的每一个节点,被称为帧或者是盒子。盒子具有内边距,外边距,边框,位置等属性。一旦渲染树构建完成之后,浏览器就开始进行绘制页面。 当Dom的变化影响到了元素的几何属性(宽和高等)——比如说修改了边框的宽度,或者是修改了高度,又或者给文章增加了内容导致元素的高度增加等,会引起浏览器进行重新计算元素的几何属性,同样,其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效。并重新构建渲染树,这个过程称为重排。完成重排之后,浏览器会重新绘制受影响的元素,这个过程被称为重绘。 并不是所有的Dom变化会影响元素的几何属性,例如,改变背景色,不会影响元素的几何属性,因此,这个时候是不会发生重排,仅仅会发生重绘,因为,元素的不布局没有发生变化。重排和重绘的代价都是昂贵的操作,他们会导致浏览器的UI线程卡顿,因此尽可能避免这类操作。 下面就是整个的基本流程图: 什么时候回发生重排 正如前面所说的,当页面的布局和几何属性发生改变的时候,就需要进行重排
  • 容器调整大小时如何重绘此处地图?(How to redraw Here Map when container resizes?)
    问题 我今天遇到了一个我以前没有遇到或注意到的特殊问题。 在 Here Maps 3.0 中设置地图时,我注意到如果浏览器窗口“小”,小于全屏窗口,则在加载地图期间,即使将浏览器窗口调整为一个全屏的。 我如何更新 Here Maps 地图大小以占用分配的空间? 我的安排如下,不知道是不是相对div的原因。 我拥有它们的原因是我正在尝试具有页眉、页脚、其他带有和不带有滚动条的文本的设计(如果页面上存在滚动条,滚动地图看起来会有点紧张)。 <style type="text/css"> #mapContainer { width: 100%; height: 100%; left: 0; top: 0; position: absolute; background: grey; } #main { position: relative; width: 100%; height: 100%; } html, body { overflow-y: hidden; } </style> <div id="main"> <div id="mapContainer"></div> </div> 回答1 在地图对象初始化后试试这个: window.addEventListener('resize', function () { map.getViewPort().resize(); })