Javascript 如何使身体的最小高度等于屏幕高度_Javascript_Jquery_Height_Css

Javascript 如何使身体的最小高度等于屏幕高度

javascript jquery css

Javascript 如何使身体的最小高度等于屏幕高度,javascript,jquery,height,css,Javascript,Jquery,Height,Css,在这里我有一个页面，由于缺少内容我们无法覆盖整个屏幕的高度。我的脚开始在空中漂浮。。我尝试在一个字段集中使用min height，但不幸的是，只有在我更改浏览器或尝试其他系统时，它才能在我的浏览器上工作。问题再次出现。。。我试过： CSS html,body{ min-height:100%; height:100%; } [id]center_wrapper{ min-height:100%; height:100%; } var body1 = docume

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

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

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

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

Javascript

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

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

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

jQuery

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

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

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

当同时使用jQuery和javascript控制台日志时，它确实显示704px，但不是704px。。我猜这可能是因为DOM创建后发生了更改

有什么帮助吗？

好吧，既然这样不行。。。您在div id“center\u wrapper”中找到了一个html元素样式，它包含在div id“title”中。将“最小高度”的图元样式更改为450，如下所示：

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

这应该可以解决问题

在我看来，这是解决您问题的流程。

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

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

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

1。获取屏幕高度。

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

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

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

2。然后使用从屏幕顶部获取制表符边距。

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

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

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

3。使用页脚ID/CLASS获取页脚高度。

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

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

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

4。现在设置选项卡视图高度

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

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

5。代码

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

6。设置选项卡视图高度

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

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

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

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

我终于成功了。
我所做的是：
1。得到了我想要位于底部的div的偏移量（）和高度（） 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);
        }
    });

我想在搜索这个问题的解决方案时添加一个答案，结果找到了一个，不需要javascript

代码取自链接文章：

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

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

页脚会贴在窗口底部，内容较短，但会被较大的内容推到窗口之外。

它不会随着浏览器和/或系统的变化而改变吗。。？它对我的Mozilla不起作用。。谢谢你的努力。因为它是页面的底部，只要它总是比页面的末端更远，它就会呈现在底部。@Bhavik我继续并用其他东西更新了它。。。这应该适用于所有平台。我之前没有注意到这一点，因为这是一个HTML元素样式，它的值为414px，不在CSS文件中。。。在$（document）.ready（）内，我想是行不通的吧..？多亏了@SandeepVirani的创意。。！！他的其他页面（主页、服务等）共享相同的页脚和CSS。在这些页面上，内容更大，因此在上下滚动页面时会产生一个“移动”的页脚。如果你已经在你的网站上加入了这个，我只想让你知道它在firefox上不起作用，在我看来还是一样的。为什么不使用

页眉

和

页脚

标记，而不是id为的通用div？嗯，我会的。就像我说的，我从我提供的链接复制了代码。