Question

My Website这里我有一个页面About Us，由于内容不足，我们无法覆盖整个屏幕高度。我的页脚开始漂浮在空中..我尝试在字段集中使用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后发生了更改..

任何帮助..

Answer 1

以为我会在寻找这个问题的解决方案时添加一个答案，找到一个here，不需要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的关键点是包装器的最小高度：100％，页脚绝对位于其内部的底部。你需要确保html和body元素也按照指定的样式进行设置，并在底部为内容提供一些空间，因为页脚会覆盖它。

页脚将以较短的内容粘贴在窗口底部，但是如果内容较大则会被推到窗口底部。

Answer 2

从我的观点来看，这是您的问题的处理流程。

<强> 1。获得屏幕高度。

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

<强> 2。然后通过使用从屏幕顶部获取TAB边缘。

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。使用IT ID / CLASS获得您的脚踏高度。

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

<强> 4。现在设置您的选项卡视图高度

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

<强> 5。 CODE

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

<强> 6。设置您的选项卡视图高度

$('#tabs div').height(newheight);

Answer 3

好吧，因为那不起作用......你的div id“center_wrapper”中有一个html元素样式，它包含在div id“title”中。将min-height的元素样式更改为450，如下所示：

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

应该这样做......

Answer 4

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

#footer-info {
    position: absolute;
    bottom: 0px;
}

Answer 5

最后我做到了..
我做的是：
1。得到我希望在底部的div的offset（）和height（） 2。得到窗口高度（）
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);
        }
    });

如何使身体的最小高度等于screen.height

5 个答案: