jquery - 绝对定位的div并调整它们的大小

Question

最近我正在处理一个元素，该元素具有背景全尺寸幻灯片，并位于内容之上。页眉和页脚必须相应地在顶部和底部具有固定的边距。

中间部分应该可以调整大小，并且与页眉和页脚有一点边距。 最重要的部分 - 窗口应该没有滚动条，当然所有的 div 都应该居中。

我看到这个工作的唯一方法是，所有三个主要 div 都绝对定位。

我正在努力调整中间部分的大小。 我从 @media 查询开始，它工作正常，因为您同时(对 Angular 线)垂直和水平调整窗口大小，但如果您尝试垂直调整窗口大小(改变高度)，它会崩溃。我通过更改 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();

Answer 1

由于所有 DIV 都是绝对定位的，我认为调整其大小的最动态方式是直接使用 Javascript 或 jQuery。尝试放弃媒体查询并处理窗口调整大小事件中的所有内容。

很难提供准确的答案，因为您没有列出任何代码，而且我不确定您的图像在哪里...但一个好的开始是将图像加载到 DIV 中。然后在 JS 中使用 new Image() 加载您的图像并将其放在 div 中。然后，您可以在加载图像时获取实际图像尺寸，将这些尺寸与屏幕尺寸进行比较，并相应地调整图像大小。