"/>
首页 \ 问答 \ CSS或JQuery修复网站布局中的侧边栏(CSS or JQuery Fixed sidebar in website layout)

CSS或JQuery修复网站布局中的侧边栏(CSS or JQuery Fixed sidebar in website layout)

我的网站设置了这样的内容结构

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

我试图让我的网站在侧栏停留在与静态布局中相同的位置。 它位于内容列的右侧,它位于标题div下方和页脚div上方,并且如果它们水平缩小窗口,则不会在内容列顶部移动。

我试过谷歌通用的CSS固定位置等,一直没有能够找到任何真正与我合作,让我问这里。 我正在寻找如何处理这与CSS或JavaScript,如果它去的JavaScript路线我最喜欢JQuery作为基地。

编辑我不需要支持archiac浏览器,但是,我不关心它是否可以在ie6中完全运行,只要它不会破坏我的页面并且可接受地降级(就像它不坐在页面的错误一侧或顶部我的标题或内容)


My website is setup with the content structure like this

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

I'm trying to make my website behave where sidebar stays in the exact same location relative to where it would be in my static layout. That it's to the right of the Content column, that it's below the header div and above the footer div and that if they shrink the window horizontally that it doesn't move on top of the content column.

I've tried google generic css fixed position etc and haven't been able to find anything that was really working with me so that leads me to ask here. I'm looking for how to handle this with either css or javascript, if it goes the javascript route I'd most prefer JQuery as a base.

Edit I don't need to support archiac browsers but, I don't care if it works fully in ie6 as long as it doesn't ruin my page and degrades acceptably (like it doesn't sit on the wrong side of the page or on top my header or content)


原文:https://stackoverflow.com/questions/1313365
更新时间:2022-12-14 09:12

最满意答案

我相信以下是最佳解决方案,至少是基于时间/空间的复杂性:

第1步:将整数存储在哈希映射中,该哈希映射将整数保存为键,并将其显示为值的次数。 这通常是一个O(n)操作,散列表中元素的插入/更新应该是平均的恒定时间。 如果发现一个整数出现两次以上,则实际上不需要进一步增加使用次数(如果不想)。

步骤2:对整数进行第二遍。 在哈希映射中查找每一个,第一个出现计数为1的是您正在查找的那个(即第一个出现的整数)。 这也是O(n) ,使得整个过程O(n)

针对特殊情况的一些可能的优化:

优化答:可以使用简单的数组而不是哈希表。 这保证了O(1),即使在最坏的情况下,也可以计算特定整数的出现次数以及查找其出现次数。 此外,这增强了实时性能,因为散列算法不需要执行。 由于可能较差的参考位置(即较大的稀疏表,而哈希表实现具有合理的负载因子),可能会有一个命中。 然而,这将是整数排序的非常特殊的情况,并且可以通过散列表的散列函数来缓解,所述散列函数根据传入整数(即,以开始的参考的较差局部性)产生伪随机存储桶布置。

数组中的每个字节将表示由该字节的索引表示的整数的计数(最多255)。 这只有在最低整数和最高整数(即有效整数域的基数)之间的差异足够小以使该数组适合内存时才可能。 特定整数数组中的索引将是其值减去数据集中存在的最小整数。

例如,在具有64位操作系统的现代硬件上,可以分配一个4GB阵列来处理整个32位整数域。 更大的阵列可以设想有足够的内存。

在处理之前必须知道最小和最大的整数,或者使用minmax算法通过数据进行另一个线性通过以找出这些信息。

优化B:您可以进一步优化优化A ,每个整数使用至多2位(一位指示存在,另一位指示多重性)。 这将允许每个字节表示四个整数,扩展数组实现以处理给定数量的可用内存的更大整数域。 可以在这里播放更多的位游戏来进一步压缩表示,但是它们只支持特殊的数据输入,因此不能推荐用于大多数情况。


I believe that the following would be the optimal solution, at least based on time / space complexity:

Step 1: Store the integers in a hash map, which holds the integer as a key and the count of the number of times it appears as the value. This is generally an O(n) operation and the insertion / updating of elements in the hash table should be constant time, on the average. If an integer is found to appear more than twice, you really don't have to increment the usage count further (if you don't want to).

Step 2: Perform a second pass over the integers. Look each up in the hash map and the first one with an appearance count of one is the one you were looking for (i.e., the first single appearing integer). This is also O(n), making the entire process O(n).

Some possible optimizations for special cases:

Optimization A: It may be possible to use a simple array instead of a hash table. This guarantees O(1) even in the worst case for counting the number of occurrences of a particular integer as well as the lookup of its appearance count. Also, this enhances real time performance, since the hash algorithm does not need to be executed. There may be a hit due to potentially poorer locality of reference (i.e., a larger sparse table vs. the hash table implementation with a reasonable load factor). However, this would be for very special cases of integer orderings and may be mitigated by the hash table's hash function producing pseudorandom bucket placements based on the incoming integers (i.e., poor locality of reference to begin with).

Each byte in the array would represent the count (up to 255) for the integer represented by the index of that byte. This would only be possible if the difference between the lowest integer and the highest (i.e., the cardinality of the domain of valid integers) was small enough such that this array would fit into memory. The index in the array of a particular integer would be its value minus the smallest integer present in the data set.

For example on modern hardware with a 64-bit OS, it is quite conceivable that a 4GB array can be allocated which can handle the entire domain of 32-bit integers. Even larger arrays are conceivable with sufficient memory.

The smallest and largest integers would have to be known before processing, or another linear pass through the data using the minmax algorithm to find out this information would be required.

Optimization B: You could optimize Optimization A further, by using at most 2 bits per integer (One bit indicates presence and the other indicates multiplicity). This would allow for the representation of four integers per byte, extending the array implementation to handle a larger domain of integers for a given amount of available memory. More bit games could be played here to compress the representation further, but they would only support special cases of data coming in and therefore cannot be recommended for the still mostly general case.

相关问答

更多
  • 如果除了一个元素(不会重复)之外的所有元素都有两个(或2的倍数)条目,则可以使用XOR运算符。 例: int x=arr[0]; for(i=1;i<1000;i++) x^=a[i]; printf("Non-repeating: %d",x); 任何与它自己异或的数字都是0.所以,如果任何数字出现两次,它将在整个异或结果中为0,因此在x只留下非重复数字。 注意:如果您有一百万个数字,则存储XOR结果的变量必须足够大。 If there are exactly TWO (or in multiple ...
  • 你有多种选择。 也许最常用的是数组属性。 喜欢这个: type TExample = class(TObject) private FItems: TArray; function GetItem(Index: Integer): Integer; procedure SetItem(Index: Integer; Value: Integer); public property Items[Index: Integer]: Integer re ...
  • 除了@kaylum的回答...... 因为你在循环中调用rand() ,所以在进入循环之前需要先调用srand() , srand(clock());//for example while(1){ LATD=0x00; int swipe=rand() % 20; ... 如果不这样做,每次执行时,您获得的随机数将是相同的值序列。 另外,如果i在用于比较之前没有重新初始化,那么它是== 10.它需要在用作数组索引之前重置... 此外,在您的代码中,您似乎想要根据10个已接受的 ...
  • 您可以使用Math.max并应用 if (5 > Math.max.apply(Math, array)) { // do something } 更新 :解释它的工作原理。 它在我链接的文档中有描述,但我会在这里尝试更清楚: Math.max返回零或更多数字中的最大值,因此: Math.max(1, 2, 3, 4) // returns 4 apply调用具有给定'this'值(第一个参数)的函数和作为数组提供的参数(第二个)。 所以: function sum(a, b) { re ...
  • '0'是char ,而不是整数。 你应该写x[i]!=0 但是char可以自动转换为int ,所以编译OK ...但是'0'转换为ASCII码,所以你的程序等于x[i]!=48 如果数组中不存在0,则应检查数组边界以避免错误。 你应该写i<1000 && x[i]!=0 编辑:你的scanf也是错误的,scanf只能接受一个号码,而我没有被分配。 我想你的意思是扫描整个字符串,然后逐个数字加起来。 然后你应该使用char并写如下: int sum, i; char x[1000]; scanf("%s", ...
  • 下面是一个拉斯维加斯算法,给定k,发生奇数次的元素的确切数量,在预期时间内报告所有元素O(nk)(读取: 当k是O(1)时的线性时间 )和空间假设“给我一个统一的随机单词”和“给我在这个单词中设置的1位数(popcount)”,O(1)个单词是恒定时间操作。 我非常肯定,我不是第一个想出这种算法的人(我甚至不确定我是否记得所有的改进),但是我已经达到了耐心的极限,试图找到它。 中心技术被称为随机限制。 基本上我们所做的就是按照价值随机过滤输入,希望我们保留一个奇数元素。 我们将经典的XOR算法应用于过滤的数 ...
  • 我相信以下是最佳解决方案,至少是基于时间/空间的复杂性: 第1步:将整数存储在哈希映射中,该哈希映射将整数保存为键,并将其显示为值的次数。 这通常是一个O(n)操作,散列表中元素的插入/更新应该是平均的恒定时间。 如果发现一个整数出现两次以上,则实际上不需要进一步增加使用次数(如果不想)。 步骤2:对整数进行第二遍。 在哈希映射中查找每一个,第一个出现计数为1的是您正在查找的那个(即第一个出现的整数)。 这也是O(n) ,使得整个过程O(n) 。 针对特殊情况的一些可能的优化: 优化答:可以使用简单的数组而 ...
  • 不同意Stack Overflow不是代码为您编写的地方的评论。 我想我可以在代码中更好更准确地解释细节,而不是在文字中,所以我在这里提供代码。 我也承认写这篇文章很乐意(这本身也不是发布它的借口)。 我这里没有使用任何动态编程或任何图形。 我正在使用Dawood Ibn Kareem的想法尝试使用和不使用x并使用递归来解决问题的其余部分。 在每次调用递归方法时,我传递数组, a和上限, capacity ; 每次通话都是一样的。 我传递了一个部分解决方案,告诉我们当前正在构建的子集中包含哪些先前考虑的元素 ...
  • 据我了解你的问题,你正在寻找一种方法来创建一个函数一对一,以便使用其他两个生成一个整数。 看下面的图片,这是一个实现它的功能: 谈到Python实现,这是我的代码(对于Python 3.x): def pack(i1, i2): if i1 > i2: return i1**2 + i2 else: return (i2 + 1)**2 - 1 - i1 def unpack(i): mx = int(i**0.5) s = (mx**2 ...
  • 未经测试: #include #include void main(){ int array[10],x,y; x = 0; while ( x < 10 ) { int duplicated = 0; scanf("%d",&array[x]); //if the entered value is same as any of //the previously entered ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)