2

我的网站在这里我有一个关于我们的页面，由于缺少内容，我们无法覆盖屏幕的完整高度。我的页脚开始漂浮在空中。我尝试在字段集中使用 min-height 进行操作，但不幸的是，它仅在我更改浏览器或尝试其他系统时才在我的浏览器上工作，问题再次开始......我有试过：
CSS 

html,body{  
min-height:100%;  
height:100%;  
}  
[id]center_wrapper{  
min-height:100%;  
height:100%; 
}

Javascript 

var body1 = document.getElementsByTagName('body')[0];  
console.log(body1);  
body1.style.minHeight = screen.height;  
body1.style.height = screen.height;  
console.log(body1.style.minHeight);

jQuery 

$('body').css('min-height', screen.height);  
$('body').css('height', screen.height);  
console.log(document.getElementsByTagName('body')[0].style.minHeight);

在同时使用 jQuery 和 javascript 控制台日志时，它确实显示 704px 但它不是 704px .. 我guess可能是因为在创建 DOM 之后发生了变化..

任何帮助..

4

5 回答 5

5

以为我会添加一个答案，因为我正在寻找这个问题的解决方案并在这里找到了一个，不需要 javascript。

取自链接文章的代码：

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

HTML 是基本的，在正文中直接有一个包装器。

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

CSS 的关键点是包装器的 min-height:100% 和页脚绝对位于其内部的底部。您需要确保 html 和 body 元素的样式也符合指定，并在底部为内容留出一些空间，因为页脚将覆盖它。

页脚将停留在窗口底部，内容较短，但内容较大时，页脚会被推到窗口底部。

于 2014-02-03T17:57:48.603 回答
1

从我的角度来看，这是您的问题的流程。

1. 获取屏幕高度。

var docheight = $(document).height();
alert(docheight);

2.然后通过使用从屏幕顶部获取标签页边距。

var offset = $(this).offset();
var mydivlft = offset.left;   // for LEFT margin from screen
var mydivtop = offset.top;   // for TOP margin from screen
alert(mydivtop);

3. 通过使用它的 ID / CLASS 来获得你的页脚高度。

var footerheight = $('#footer-info').height();
alert(footerheight);

4. 现在设置您的标签视图高度

YOUR TABVIEW_HEIGHT = SCREEN_HEIGHT (minus) FOOTER_HEIGHT (minus) TAB_MARGIN_FROM_TOP

5. 代码

var x = mydivtop+footerheight
var newheight = docheight-x;

6. 设置标签视图高度

$('#tabs div').height(newheight);
于 2013-06-15T05:21:56.340 回答
0

最后我做到了..
我所做的是：
1.得到了我想要位于底部的 div 的 offset() 和 height()
2.得到了窗口 height()
3.最后使用 jQuery css 属性我得到了保持下来所需的保证金

代码如下：

$(function () {
        var x = $('#footer-info').offset();
        var z = $(window).height();
        var y = $('#footer-info').height();
        console.log(y);
        if (z > x.top) {
            var res = z - x.top - y;
            console.log(res);
            $('#footer-info').css('margin-top', res);
        }
    });
于 2013-06-15T07:03:34.063 回答
0

好吧，因为这不起作用...您在 div id“center_wrapper”中找到了一个 html 元素样式，它包含在 div id“title”中。将min-height的元素样式改为450，如下图：

<fieldset id="center_wrapper" style="min-height: 450px;">

这应该够了吧...

于 2013-06-15T04:57:15.663 回答
0

听起来您真正想要的是固定在浏览器窗口底部的页脚。试试这个：

#footer-info {
    position: absolute;
    bottom: 0px;
}
于 2013-06-15T05:46:37.610 回答