将 div 置于黄金比例：替代绝对位置？

编程问答 2022-08-07

问题描述

我已经构建了一个页面，如下面的示例所示。您也可以在 codepen 上试用它。

我们的想法是，将深灰色的英雄框放置在视口的底部。到目前为止很容易。 但是如果屏幕的高度太小（例如对于小型笔记本电脑），以至于文本会填充大部分（甚至全部）视口，则背景图像几乎无法实现。在这种情况下，英雄框应该放置在黄金比例而不是视口底部。

我也已经在示例中构建了该解决方案。只需降低浏览器窗口的高度即可。

我总觉得我做错了什么。目前，我将英雄、内容和页脚放置在绝对定位的 div 中。只要#content div 中只有静态内容，它就可以正常工作。但是，如果有例如手风琴或其他一些折叠/动态的东西，则必须重新计算页脚的位置。

我可以通过重新调用 ratio 函数轻松做到这一点。但与此同时，整个解决方案看起来确实有问题，或者对我来说可能太复杂了。

难道没有其他更简单的解决方案可以将具有相对位置的内容 div 放置在英雄容器之后吗？

// call function after everything has been loaded
$(window).load(function() { 
    checkRatio();
});

window.dispatchEvent(new Event('resize'));

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


function checkRatio() {   

    var ratio = 0;
    var contentTopPos = 0;
    var footerTopPos = 0;

    var windowHeight = $(window).height();
    var headerHeight = $("#hero").height();
    var contentHeight = $("#content").height();

    ratio = (windowHeight / headerHeight);
    contentTopPos = (windowHeight / 1.618);


    if(ratio < 1.618) {
        // Window too small or Content too long
        $("#hero").css('bottom','initial');            
        $("#hero").css('top',contentTopPos);            
    } else {
        // Default Position: bottom 0
        $("#hero").css('top','initial');
        $("#hero").css('bottom',0);        
    }


    var sumHeight  = $("#hero").offset().top + $("#hero").height();
    $("#content").css('top',sumHeight + "px");   

    footerTopPos = (sumHeight + contentHeight);
    $("#footer").css('top',footerTopPos + "px");
}
body {
     padding: 0;
     margin: 0;
     font-family:Verdana,Geneva,Tahoma,sans-serif;
}
#header_img { 
     position: fixed;
     top: 0;
     height: 100vh;
     width: 100%;
     background-size: cover;
     z-index: 1;
 }

 #hero_container {
     position: relative;
     height: 100vh;
     width: 100%;
 }
 #hero {
     position: absolute;
     margin: 0 5%;
     bottom: 0;
     width: 90%;
     height: auto;
     background-color: #333;
     box-shadow: 0 -2px 6px rgba(0,0.46);
     z-index: 2;
 }

 #hero_text {
     padding: 20px;
     color: #fff;
 }

 #content {
     position: absolute;
     width: 100%;
     background-color: transparent;
     z-index: 3;
 }

 section {
     background-color: #dedede;
     padding: 20px;
     border-bottom: solid 1px #333;
 }

 #footer {
     position: absolute;      
     width: 100%;      
     z-index: 3;
     background-color: #999;
     color: #555;
 }
 #footer_text {
     padding: 10px 20px;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="header_img" style="background: #ffffff url('https://cdn4.vectorstock.com/i/1000x1000/80/28/free-sample-rubber-stamp-vector-13448028.jpg') no-repeat center top; background-size: cover;"></div>


<div id="hero_container">
    <div id="hero">
        <div id="hero_text">
            <h1>Lorem ipsum dolor sit</h1>
            <h4>Cras felis leo,pellentesque non dui ut,molestie mollis lorem.</h4>
            <p>Fusce venenatis metus id est venenatis ornare. Aliquam id ante et nulla rutrum malesuada vel sit amet felis. Maecenas maximus,quam vitae cursus ultrices,est augue consequat magna,vitae bibendum ex urna eget lacus. Donec quis sagittis diam.</p>
        </div>
    </div>
</div>


<div id="content">
    <section>
        <h2>Vivamus molestie</h2>
        <p>Sem sit amet posuere elementum,ligula dolor laoreet eros,sed ultrices mi lacus quis est. Sed ut venenatis metus,id consectetur mauris.</p>
    </section>

    <section>
        <h2>Mauris sollicitudin ante est</h2>
        <p>Ut ultrices neque volutpat quis. Aenean bibendum dui sed pulvinar vestibulum. Vestibulum finibus ornare dui at lobortis.</p>
    </section>

    <section>
        <h2>Sed consequat euismod sem</h2>
        <p>In venenatis lacus luctus in. Nam elementum dolor a magna eleifend consectetur. Curabitur efficitur magna erat,et eleifend enim placerat sit amet. Fusce cursus,sem vel porta tempor,diam dolor auctor lorem,eu venenatis velit lorem ac lectus.</p>
    </section>
</div>


<div id="footer">
    <div id="footer_text">&copy; 2020 SchweizerSchoggi</div>        
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

absolutecss-positionhtmljquery