Question

我需要创建一个响应式网站，该内容适合浏览器高度内的内容，不应显示垂直滚动。我需要在页面顶部放置标题，在底部放置页脚，我需要将内容放在剩余的高度。在内容中，我有一个必须符合该内容的图像，不得缩放。有没有任何解决方案，或者我需要计算标题高度，然后标题页脚和窗口高度减去。谢谢:)）

var content = $(window).height() - $('.header').height() - $('.footer').height();

Answer 1

<强> JS：

function _responsive( )
{
    var content = $(window).height() - $('.header').height() - $('.footer').height();
    $('.content').css('height' , content);
}
$(window).resize(function()
{
    _responsive();
});
_responsive();

HTML：

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

<强> CSS：

.content {
    overflow-x:hidden; overflow-y:auto;
}

Answer 2

如果你有一个固定页眉作为页脚，尝试这样的事情。我不确定这是否比仅仅使用javascript更实用，但这里是

HTML ..

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

css ...

body {
    overflow:hidden;
}
#header {
    background-color:blue;
    height:100px;
    width:100%;
    position:absolute;
    top:0%;
    z-index:1;
}
#content {
    background-color:red;
    height:100%;
    position:relative;
    z-index:0;
}
#footer {
    background-color:green;
    height:100px;
    width:100%;
    vertical-align:bottom;
    position:relative;
    top:-100px;
    z-index:1;
}

将页脚顶部设置为页脚的负高度。

Answer 3

编辑：由于页眉和页脚的高度固定，您可以这样做：

var _UI = function() {
            var w = $(window).height();
            var h = 100; //height of your header
            var f = 300; //height of your footer
            $('#content-div').css({'height': (w - (h - f)) + 'px'});
        };

创建此func后将存储正确的高度大小，您只需在window.resize和doc.ready上调用它

        $(window).resize(function() {
            _UI();
        });

        $(document).ready(function() {
            _UI();
        });

如何在剩余高度上拟合内容

3 个答案: