Question

我会说我很喜欢HTML和CSS，当我开始触摸JavaScript时，我很难;我可以理解其中的一部分，但我不能写下我的生活！无论如何，我试图学习;我把这个jQuery脚本和目标放在一起，将一个div放在一个相对定位的顶部div和一个绝对定位的底部div之间。这对我不起作用，哈哈。

因为我正在尝试学习如何使用jQuery并创建自己的脚本，所以我想尝试让它工作。但是，如果有更好的方法来实现我的目标，我也非常感谢你的投入！

<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>

.headcontent 是顶级div。

.midcontent 是我想要居中的中间人。

.footer 是底层div。

Answer 1

在计算某些东西时只需要一点小费，在你到达最终数字之前永远不要圆。

h = Header Height

f = Footer Height

m = Middle Height

d = Document Height

s = Height of the space above or below the div

这里我们假设文档的高度等于所有其他元素的高度。由于中间div上方和下方的空间相等，我们有两个空格。

d = h + f + m + 2s

d - h - m -f = 2s

(d - h - m - f) / 2 = s

让我们把它放到一些javascript中

$(document).ready(function() {

    $(window).resize(vertical_height());

function vertical_height() {
    var doc_height = $(document).height();
    var head_height = $(".headcontent").height();
    var mid_height = $(".midcontent").height();
    var foot_height = $(".footer").height();
    var fin_height = Math.round((doc_height - head_height - mid_height - foot_height) / 2);
    $('.midcontent').css("margin-top", fin_height)
  }
});

对于css我们只需要添加一个上边距，因为这会将它从标题中推开，因为我假设绝对定位的页脚将被卡在底部。

这是一个工作小提琴：http://jsfiddle.net/nBUnt/14/

Answer 2

这是你的代码，整理成将要运行的东西：

$(function() {
    function vertical_height() {
        var doc_height = $(document).height();
        var head_height = $(".headcontent").height();
        //var mid_height = $(".midcontent").height();//not used
        var foot_height = $(".footer").height();
        var pos_height = head_height + foot_height;
        var neg_height = (head_height - foot_height) / 2;
        var fin_height = doc_height - (pos_height - neg_height);
        $('.midcontent').css({
            "marginTop": "-" + fin_height + "px",
            "marginBottom": "-" + fin_height + "px"
        });
    }
    $(window).resize(vertical_height).trigger('resize');
});

现在你可以集中精力使算法正确。

现在，结合并简化表达式，我得到：

var fin_height = doc_height - head_height*3/2 - foot_height*3/2;

这对我来说不合适，但我可能错了。

修改

为避免重叠，请尝试以下版本：

var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
    var w = $$.w.height(),
        h = $$.h.outerHeight(true),
        m = $$.m.outerHeight(),
        f = $$.f.outerHeight(true),
        fin_height = Math.max(0, (w - h - m - f) / 2);
    $$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
    $$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');

<强> DEMO

注释

position:absolute从页脚的CSS
jQuery对象现在缓存在$$中，以减少调整大小处理程序的工作量。
现在根据窗口高度而不是文档高度进行计算。
现在用.outerHeight(false)衡量三个div，包括垂直填充和边框。
Math.max(0, ...)阻止重叠，确保鳍高度不会消极。
语句$$.h.text(fin_height);用于调试，可以删除。

编辑2

以下代码将“去抖动”调整大小事件。

替换：

$(window).on('resize', vertical_height).trigger('resize');

with：

var do_resize;
$(window).on('resize', function(){
  clearTimeout(do_resize);
  do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');

如何在两个div之间垂直居中div？ jQuery的？

2 个答案:

修改

编辑2