最近我正在研究一个带有背景全尺寸幻灯片的项目，并且在内容之上。页眉和页脚必须相应地在顶部和底部具有固定的边距。
中间部分应该是可调整大小的，并且对页眉和页脚有一点边距。最重要的部分 - 窗口应该没有滚动条，当然所有的 div 都应该居中。
我看到这个工作的唯一方法是，所有三个主要 div 都是绝对定位的。
我正在努力调整中间部分的大小。我从@media 查询开始，它工作正常，因为您同时垂直和水平调整窗口（对角线），但如果您尝试垂直调整窗口大小（改变高度），它会崩溃。我通过 jQuery 通过更改 div 中每个元素的 CSS 属性来实现这一点。这不是很一致，因为我必须更改图像的大小。此外，如果我在不刷新的情况下重新更改回正常宽度/高度，则 JS 文件中定义的 css 属性将覆盖 CSS 中的属性，因为它们具有更高的优先级。
有没有其他方法可以做到这一点？
调整中间部分大小的最佳方法是什么？
对不起，这是代码...
<div class="container">
<header>
<div class="nav">
---upper navigation part
</div>
</header>
<div id="content">
<span class="arrow-left"><a href="#"></a></span>
<span class="arrow-right"><a href="#"></a></span>
<div class="central">
<div class="inner">
<h2>Contact Us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputat</p>
<div class="contacts">
<p>some text </p>
<p>some text </p>
<div>image div</div>
</div>
</div>
</div>
</div>
<footer>
<div class="nav">
---- navigation part
</div>
</footer>
</div>
</body>
CSS:
.container{
position: relative;
height:100%;
margin:0 auto;
width:100%;
}
header{
position:absolute;
top:50px;
width:1000px;
left:50%;
margin-left:-500px;
}
footer{
position:absolute;
bottom:50px;
width:1000px;
left:50%;
margin-left:-500px;
}
#content{
width:1000px;
margin:auto;
position: absolute;
top: 113px;
bottom: 113px;
left: 0px;
right: 0px;
}
.central{
height: 100%;
position:relative;
width:560px;
float:right;
background:red;
overflow:hidden;
}
.inner{
width:500px;
float:right;
padding:0 30px;
margin: 4px 0;
}
.inner h2{
font-family: sans-serif;
font-size:2em;
line-height:140%;
}
.inner p{
line-height:120%;
font-size:1em;
padding:15px 0;
}
.image{
background-image:url(image.png);
margin-right:0 !important;
display:block;
margin:10px auto;
width:500px;
height:232px;
}
AND JS file:
$(window).resize(function(){
var inner_h = $('.inner').height()/2;
console.log(inner_h);
$('.inner').css({
position:'absolute',
left: 0,
top: '50%',
'margin-top': '-'+inner_h + 'px'
});
$('.inner h2').css({
'font-size': '2em'
});
$('.inner p').css({
'font-size': '100%'
});
if($(window).width() < 1100){
$('.map').css({
'background-size':'350px 162px',
'background-image':'url(images/contact-map350.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 750){
$('.inner').css({
position:'absolute',
left: 0,
top: '55%',
'margin-top': '-'+inner_h + 'px'
});
$('.inner h2').css({
'font-size': '1.5em'
});
$('.inner p').css({
'font-size': '90%'
});
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 650){
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
});
$(window).load(function(){
var inner_h = $('.inner').height()/2;
console.log(inner_h);
$('.inner').css({
position:'absolute',
left: 0,
top: '50%',
'margin-top': '-'+inner_h + 'px'
});
$('.inner h2').css({
'font-size': '2em'
});
$('.inner p').css({
'font-size': '100%'
});
if($(window).width() < 1100){
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 750){
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 650){
$('.inner').css({
position:'absolute',
left: 0,
top: '55%',
'margin-top': '-'+inner_h + 'px'
});
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
});
// run the function:
$(window).resize();
$(window).load();