Question

我在页面上有标题，其余部分是页面内容。

现在我需要用backgrout填充整个页面（没有标题）

<html>
    <body>
        <header style="background:none repeat scroll 0 0 #fff;">
             <div id="logo"><img src="xy.jpg" /></div>
        </header>
        <section style="background:none repeat scroll 0 0 #f0efed;">
             <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
        </section>
    </body>
</html>

适用于长页面...比页面高度更长。但是在这样的短篇网页上，它不起作用。

如果我使用一些例子来处理高度100％，通过min-height 100％就像这样 Stretching a content div (under a header) to full page length

它适用于短篇页面

但是在长页面上，背景在页面高度的100％处被剪切，文本会下降（页面长度超过100％）

我发现只有一个功能解决方案，它通过加载javascript和调整大小

来实现

if (parseInt($("section").css('height'), 10) < $(window).height() - parseInt($("header").css('height'), 10)) $("section").css('height', ($(window).height() - parseInt($("header").css('height'), 10)) + 'px');

Answer 1

如果您能够只支持现代浏览器（对于Internet Explorer，这意味着版本10+），您可以使用Flexible Box Layout：

body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
section {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

如果您有多个部分，则可能更喜欢使用main元素（或div包装器）而不是section：

<html>
    <style>
    body {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        min-height: 100vh;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    main {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #f0efed;
    }
    </style>
    <body>
        <header style="background:none repeat scroll 0 0 #fff;">
             <div id="logo"><img src="xy.jpg" /></div>
        </header>
        <main role='main'>
            <section>
                <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.
                </div>
            </section>
        </main>
    </body>
</html>

您可以在Solved by Flexbox了解更多相关信息。

拉伸div（部分）到整页高度

1 个答案: