Question

我想问我是否可以div填补整个剩余空间。

我需要制作有2个部分的网站 - 一个始终在顶部，一个始终在底部

你可以给我一些想法（没有位置：绝对;）

所以这是我的想法 - 3个Divs与班级： HTML：

<div class="top"><div>
<div class="center" ></div>
<div class="bottom"></div>

的CSS：

.bottom{
position:relative;
width:100%;
}
.top{
display:block;
min-height: 250px;
}
.center{
display:block;
min-height:30px;
height:auto;
}

Answer 1

如果你给div一个ID你可以像这样使用jQuery：

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

function resizeWindow() {
    var sHeight = $(window).height();
    var tHeight = $("#top").height();
    var bHeight = $("#bottom").height();
    var nHeight = sHeight - tHeight - bHeight;
    $("#center").height(nHeight);
}

调整大小部分还允许任何人调整屏幕大小，如果有人使用平板电脑/智能手机改变方向。

Answer 2

据我所知，你希望三个div叠在一起。

<div id="container">
    <div class="top"><div>
    <div class="center" ></div>
    <div class="bottom"></div> 
</div> 

#container {
width:100%;
height:100%;
}
    .bottom{
    position:relative;
    height:25%;
    width:100%;
    }
    .top{
    position:relative;
    height:25%;
    width:100%;
    }
    .center{
    position:relative;
    height:50%;
    width:100%;
    }

div填充剩余的空间屏幕

2 个答案: