最近、背景にフルサイズのスライドショーがあり、コンテンツの上にあるプロジェクトに取り組んでいます。それに応じて、ヘッダーとフッターには上下に固定の余白が必要です。
中央部分はサイズ変更可能で、ヘッダーとフッターに少し余白が必要です。最も重要な部分 - ウィンドウにはスクロールバーがなく、もちろんすべての div が中央にある必要があります。
これが機能していることを確認する唯一の方法は、3 つの主要な div すべてが完全に配置されていることです。
中央部分のサイズ変更に苦労しています。ウィンドウを垂直方向と水平方向に同時に (斜めに) サイズ変更するため、@media クエリは正常に機能しますが、ウィンドウを垂直方向にサイズ変更しようとすると (高さを変更すると) クラッシュします。これは、div 内の各要素の CSS プロパティを変更して jQuery で作成しました。画像のサイズを変更する必要があるため、これはあまり一貫性がありません。また、更新なしで通常の幅/高さに再変更すると、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();