个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 tutorial by Ben Holland 开发一个钉板风格的博客(如 Pinterest) .每个图钉都有一个绝对位置，它的位置(顶部和左侧)是用 jQuery 脚本计算的 http://labs.benholland.me/pinterest/js/script-centered.js
一切正常(see demo)，但唯一需要做的就是添加页脚。当我尝试添加页脚时(无论它如何定位:相对或绝对)，它要么显示在页面顶部 (position:relative)，要么漂浮在页面中间的某个位置页面(position:absolute;bottom:0)。页脚从不显示在博客下方。
我尝试了很多 CSS 解决方案(clearfixes、floats、各种不同的位置组合)，毕竟我得出的结论是没有 JS 是不可能的。
问题可以通过将看板放在容器中，给容器position:relative并添加正确的高度来解决。在此之后，页脚可以放在容器下面。这就是我被困的地方。
我是 JavaScript 的初学者，有人可以帮助我吗？
最佳答案
就像你说的，你可以用一个div来包含这些绝对元素结构如下:
<body onload="setupBlocks();">
<header>header</header>
<section id="container">
<div class="block">
<p>Lorem ipsum dolor sit amet....</p>
</div>
......
</section>
<footer>footer</footer>
</body>
和 CSS 代码如下:
header{height:30px;background-color:green;}
footer{height:20px;background-color:gray;}
section{position:relative;} //It's important,absolute element will calculate position depending on nearest parent which has sure position.
关于js代码，请看array:block[]，这个数组记录了每一列的高度，你可以在console中打印出来。所以你需要做的只是将 block[] 的最大值设置为 section。在这里，我在函数 positionBlocks 中添加了两行，并添加了一个获取最大值的函数
function positionBlocks() {
$('.block').each(function(i){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':(leftPos+spaceLeft)+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
var max = Array.max(blocks); //you need to write a function to get max value of block
$('section').height(max); //set section(or div,as you wish)'s height
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
// Function to get the Max value in Array
Array.max = function(array) {
return Math.max.apply(Math, array);
};
如果section的高度太小，想让脚到底，需要计算(scollheight-other's height)、与section的高度比较，替换到设置的seciton的高度线中。
关于javascript - 计算pinboard风格博客的容器高度(基于绝对元素)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24987001/
26
4
0
popup bookmarklet 在更新到 Firefox 85 之前运行良好。现在它被 Firefox 阻止了。当我使用这个书签将网站加入书签时 Pinbord , 对所有网站都做异常(excep
我去了Pinboard's Resource page ，得到了我的小部件，一切都运行得很好。我已经设计了它的样式(anwarchoukah.com 上的侧边栏)并且总体上很满意。 生成的代码是
大家好，我正在使用 Pinboard API 从我的 Android 应用程序添加帖子。每次我发送带有所需凭据和参数的 GET 请求时，我都会收到 401 Unauthorized 响应代码。我从 P
我是一名优秀的程序员,十分优秀！