Question

我正在尝试将标题文字保留在标题图片中，标题图片设置为高度：100％。当我缩小网站的高度时，文本开始流出包装器.. 我希望文本留在标题图片中。换句话说，即使我将高度设置为100％，我希望图片大到足以将文本保留在其中而不管浏览器高度如何。我已经尝试过设置min-height ..

如果您不知道我的意思，请尝试缩小浏览器的高度......

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;
}

你也可以用最小高度做一些更敏感的事情。

内容不断流出高度设置为100％的div

1 个答案: