1

我会说我很擅长 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是我想要居中的中间 div。

.footer是底部的 div。

4

2 回答 2

1

这是你的代码，整理成可以运行的东西：

$(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');

演示

笔记

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

编辑 2

以下代码将“消除”调整大小事件。

代替 ：

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

和 ：

var do_resize;
$(window).on('resize', function(){
  clearTimeout(do_resize);
  do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');
于 2012-08-03T00:39:21.037 回答
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/

于 2012-08-03T00:17:17.930 回答