css - 内容不断流出高度设置为100%的div

Question

我试图将我的标题文本保留在标题图片内，该图片设置为高度:100%。 当我缩小网站的高度时，文本开始从包装器中流出。 我希望文本保留在标题图片内。换句话说，无论浏览器高度如何，我都希望图片足够大以将文本保留在其中，即使我将高度设置为 100%。我已经尝试设置最小高度..

如果你不明白我的意思，请在这里尝试缩小浏览器的高度...

http://nycmultifamilyloans.com/

我该如何解决这个问题？

到目前为止，我有:

<div id="headerwrap">
        <div class="container">
            <div class="row centered headertext">

                <h1>WE PROVIDE MULTIFAMILY, MIXED USE, AND COMMERCIAL MORTGAGES</h1>
                <h2>in New York City</h2>
                    <p>
                        GEORGE O'CONNOR <br/>
                        917-805-8851<br/>
                        GTOCONNOR@NYCMULTIFAMILYLOANS.COM
                    </p>
            </div><!-- row -->
        </div><!-- container -->

    </div><!-- headerwrap -->

    #headerwrap {
       position: relative;
    }



    html, body, #headerwrap{
        height: 100%;
    }

    #headerwrap .container {

        background: url(../img/header.jpg) no-repeat center top;
        margin-top: -10px;
        padding-top:20px;
        text-align:center;
        background-attachment: relative;
        background-position: center center;
       height: 100%;
        width: 100%;

        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .headertext {
         position: absolute;
        top: 30%;
        left: 0;
    }

谢谢!

Answer 1

漂亮的网站! 如果您愿意以像素为单位指定最小高度，只需执行以下操作:

#headerwrap {
    position: relative;
    min-height:450px;
}

您也可以使用 min-height 做一些更具响应性的事情。