如何使对象浮动在不同标记的右下角

Question

我想要在父div的右下角放置一个图像。

CSS的想法来自不同的答案-这是不起作用的(计算( 100% - 200px)使用100%的页面高度，而不是父div高度100%，除非我显式地给它设置了高度)。

现在我做了一些JS，它做了我想要的(参见我自己的答案)，问题是:没有JS，我能(以及如何)得到同样的结果吗？

(这项工作既不能在jsfiddle中完成，也不能在cssdesk.com中完成，所以您必须将其复制粘贴到您自己的html文件中并导航到该文件中……)

<style>
    .container {
        overflow: auto;
        background-color: green;
    }

    img {
        height: 200px;
        width: 150px;
        background-color: white;
        border: 50px double steelblue;
        box-sizing: border-box;
        float: right;
        clear: right;
    }

    .spacer {
        /* height: calc(100% - 200px); <--- this one sadly doesn't work */
        float: right;
    }
</style>
<div style="background-color: blue">header + other stuff</div>
<div class="container" id="container">
    <div class="spacer" id="spacer"></div>
    <img id="img" />
    <p>
        Conceptualizing random endpoints in an access matrix 
        provides reach extensions enterprise wide. Respective 
        divisions historically insignificant, upscale trendlines 
        in a management inventory analysis survivability format.
    </p><p>
        Document-centric projections unfetter traditional 
        auditing practices rivaling central process management. 
        Advanced functionality, easy administration, proclaim 
        the hallmarks of unprecedented opportunity.
    </p><p>
        Iteration system-wide engenders economies of scale, 
        cross-media technology, presentation action items and 
        life cycle replication.
    </p><p>
        Enterprise engenderment accelerates initiative platforms, 
        reducing staffing components, integration of technical 
        accessibility, resulting in bottom line pluralisms, 
        benefit-wise. Incidental re-sizing staff requirements 
        through attrition can be accelerated by paradigm shifts 
        and focusing on core suitability and cross-training.
    </p><p>
        Marketing teams input produce cross purposing in view of 
        goal alignments due to knowledge paucity, necessitating 
        workflow education and orientation. Media sourcing as an 
        acquisition strategy is counterproductive in a internet 
        environment in virtual component methodology. Imaging 
        through ideals rather than real world branding, is a 
        perilous undertaking with negative results. Branding 
        strategies generating motion as activity without 
        reproducible results is a ultimately futile effort if 
        left in place.
    </p><p>
        Analysis of funding is inappropriate in this effort as 
        assets are repurposed in statements who existence owe 
        their identity to their obscurity. Obfuscation of 
        responsibility underlines these offerings, whose primary 
        function is to generate revenue and secondarily to shift 
        accountability downstream.
    </p><p>
        Syntactically valid structuring implementation, 
        enhancement based reporting, technology development, 
        proprietary incidentals administration are all areas of 
        content modularization engaging visibility deficits. 
        Cyberliability management procedures underlining 
        performance degradation vouchsafing interdepartmental 
        communication guideline infrastructure for evaluating 
        content management.
    </p>
</div>
<div style="background-color: red">other stuff + footer</div>

Answer 1

一种使用JS的解决方案依赖于由浏览器更新的容器高度，并使用该高度重新定位图像。

黄色的框应该是width:0px，像上面一样是空的，这里它更宽，只是为了可视化，实际发生了什么，并显示了JS的调试输出。

<style>
    .spacer {
        width: 150px;
        background-color: yellow;
    }
</style>
<script>
(function() {
    document.addEventListener("DOMContentLoaded", 
    function (e) {
        var container = document.getElementById("container");
        var spacer    = document.getElementById("spacer");
        var img       = document.getElementById("img");

        var c_container = window.getComputedStyle(container);
        var c_img       = window.getComputedStyle(img      );

        var prev_width = 0;

        setInterval(
            function() {
                if (!document.hidden) {
                    var w_container = parseInt(c_container.getPropertyValue("width"));

                    var h_img       = parseInt(c_img      .getPropertyValue("height"));
                    if (w_container > prev_width) {
                        var h_container = h_img;
                    } else {
                        var h_container = parseInt(c_container.getPropertyValue("height"));
                    }
                    prev_width = w_container;
                    var h_spacer    = h_container - h_img;

                    spacer.style.height = h_spacer;

                    spacer.innerHTML = ""
                        + "w_container: " + w_container + "</br>"
                        + "prev_width: " + prev_width + "</br>"
                        + "h_container: " + h_container + "</br>"
                        + "h_img: " + h_img+ "</br>"
                        + "h_spacer: " + h_spacer + "</br>"
                    ;
                }
            }, 100
        );
    }
    );
})();
</script>