Question

最近我正在开展一个带有背景全尺寸幻灯片放映的项目，并且在上面的内容之上。页眉和页脚必须在顶部和底部有一个固定的边距。

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

我看到这个工作的唯一方法，所有三个主要的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();

Answer 1

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

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

绝对定位div和调整它们的大小

1 个答案: