html - 你能把一个 div 粘在另一个 div 的底部吗？

Question

我正在为工作建立这个网站，但我遇到了一个小问题。我认为有一个标题是个好主意，后面跟着一个旋转的横幅，然后是文本，但是当页面滚动时只有文本移动。它在我的全屏显示器上工作正常，但我试图让它在较小的屏幕上明显响应，横幅缩小但带有文本的 div 仍然与顶部的像素数相同。这在两者之间留下了一个没有吸引力的空间。

无论如何这是我的 html:

<div id="banner"><script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script> <img class="active" src="Images/banner1.jpg"> <img src=
    "Images/banner4.jpg"> <img src="Images/banner2.jpg"> <img src=
    "Images/banner3.jpg"> <img src="Images/banner5.jpg"></div>
        <script type="text/javascript">

        $(document).ready(function () {
        setInterval(function () {
            //Get current active image
            var active = $('#banner .active');

            // If there is another image(object) left then make that image next
            // If not, go back to the first image of the banner div
            if (active.next().length > 0) var next = active.next();
            else var next = $('#banner img:first');

            //Get the next image ready by modifying the z-index
            next.css('z-index', '2');

            //Fade out the active image, then
            active.fadeOut(1000, function () {
            //Move the active image to the back of the pile, show it and remove the active class
            active.css('z-index', '1').show().removeClass('active');
            //Make the next image the active one  
            next.css('z-index', '3').addClass('active');
            });


        }, 3000);
        });

        </script> <!--BANNER FINISH-->


        <div id="content">
            <div class="maintext">
                <h1>Welcome to InstaGuard security</h1>

            </br>

                <p>We are installers of temporary security systems. </p>
            </div>

和CSS:

#banner {
    width: 100%;
    top: 181px;
    position: absolute;
}

#banner img {
    position: fixed;
    z-index:1;
    width: 100%;
}

#banner img.active {
    z-index:3;  
}

#content {
    position: relative;
    top: 681px; 
    height: 1000px;
    z-index: 70;
    background-color: #FFF;
    padding-top: 0.5%;
}

.maintext {
    text-align: center;
    width: 70%;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
}

是否可以将“内容”div“粘贴”到“横幅”div 的底部，以便它们一起移动？如果您能提供任何帮助，我将不胜感激。

Answer 1

通过将父容器设置为 position: relative 并将其子容器设置为

position: absolute;
bottom: 0;

您将始终让子项位于父项的底部。

匹配你的例子:

#banner {
    position: relative;
}
#content {
    position: absolute;
    bottom: 0;
}

Codepen 中的基本示例:http://codepen.io/Nice2MeatU/pen/avvGRO