css - 窗口底部的位置标题+全宽

Question

我有一个标题 1(#banner h1.index_banner_text)，它需要始终位于距页面底部 20 像素和距页面左侧 570 像素的位置。如果调整窗口大小，我希望标题自然堆叠，但始终与页面底部保持 20px 的距离。我知道，要让它位于底部，它需要在容器中(#banner .text)，但是当我创建该容器时，如果宽度延伸过远有问题。几个小时以来，我一直在努力解决这个问题，如果有人有任何见解，那就太好了。目前，我的#banner .text 容器的宽度为 40%，因为这意味着它不会在我的窗口上创建一个巨大的水平滚动条，但它不是全宽，而且页眉堆叠得太短。

元素也位于 100% 宽度和高度的背景渐变横幅中。 (可能会导致问题)

    /*banner h1 container*/
    #banner .text{
        position:relative;
        z-index:50;
        left:570px;
        height:1125px;
        width:40%;
    }
    /*banner h1*/
    #banner h1.index_banner_text{
        position:absolute;
        bottom:20px;
        font-family: 'Museo300Regular';
        font-size:43.8px;
        text-shadow:1px 1px 2px #000;
        color:#e7e7e7;
    }

    /*background fading css*/
    #banner{
        height:100%;
        width:100%;
        z-index:1;
        position:relative
    }
    #banner .wrapper .background{
        position:fixed;
        /*left:50%;*/
        right:0;
        top:0;
        z-index:1;
    }
    #banner .wrapper{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:2;
        display:none;
    }
    #banner .wrapper.active{
        display:block;
        z-index:3;  
    }
    #banner .wrapper.fading{
        z-index:4;  
    }

Answer 1

只需在右侧的 css div 中放置一个 bottom:20px;，它就会始终与底部保持 20px