Question

我正在寻找一种在整个网站周围设置边框的智能方法。

问题是我有一个固定的div .teaser-image，其背景应该覆盖整个视口，其属性为width: 100%和height: 100%，所以我必须设置{{1} }}和html也适用于这些值，否则固定div只能与其内容一样高。

当我将边框添加到body时，它仅包裹在100％高度附近，但不会在整个网站周围伸展。

任何想法如何解决这个问题？

http://jsfiddle.net/cJgBs/

HTML

body

CSS

<div class="teaser-image"></div>

<header>
    <h1>Headline</h1>
    <p>Some content</p>
</header>

<section>
    <h1>Headline</h1>
    <p>Some content</p>       
</section>        

<section>
    <h1>Headline</h1>
    <p>Some content</p>       
</section>

Answer 1

更新：如果您希望标题/部分与视口具有相同的高度，则只需使用min-height: 100vh;

我认为主要问题在于将标题和部分的最小高度设置为100％。这意味着每个标题/部分的高度应大于或等于其父级的高度。但是标题和节的父节点是页面主体，所以你实际上要做的是使3个子元素各自具有与包含元素相同的高度，这显然没有很好地定义。

需要做的一件事是将标题/部分min-height设置为常量（例如300px）。需要改变的另一件事是html / body身高。通过将其设置为100％，可以防止其增长。而不是高度，你可以在这里使用最小高度。最后，出于审美原因，你可以添加top：0;到你的预告片 - 图像课程：

<强> CSS

html,
body {
    margin: 0;
    min-height: 100%;
    color: #fff;
}

body {
    border: 10px solid #000;
}

.teaser-image {
    top:0;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg) center center no-repeat;
    background-size: cover;
}

header,
section {
    width: 100%;
    min-height: 300px;
    padding: 20px;
    box-sizing: border-box;
}

section {
    background: rgba(255, 255, 255, .5);
}

可以看到应用上述更改的结果here。请注意，边框现在包装整个页面。如果您希望边框仅包装当前视口，那么您可能需要this之类的内容。

整个网站周围的边界

1 个答案: