Question

大家好，这已经困扰了我几个小时。

我使用布局来获得全高容器和粘性页脚。不幸的是，我只想在内容中使用边框，但它不会扩展到页脚。我可以尝试将包装div设为边框，但我不希望标题有边框。 我唯一能想到的是给标题赋予背景的边框颜色，但我不想这样做。

还有其他方法可以做到这一点吗？

    <body>
    <div class="wrap">
        <header>
            <img src="http://placedog.com/400/50" />
        </header>
        <div class="content">i dont want the header tag to have a border
      </div>
        <footer>This is a footer.</footer>
    </div>
</body>

Image

Answer 1

fiddle

<body>
    <div class="wrap">
        <header>
            <img src="http://placedog.com/400/50" />
        </header>
        <div class="content">i dont want the header tag to have a border</div>
        <footer>This is a footer.</footer>
    </div>
</body>

-

body, html {
    height:100%;
    margin:0;
    padding:0;
}

.wrap {
    margin:0 auto;
    position:relative;
    width:400px;
    height:100%;
    background:lightblue;
}

header {
    height:8%; /* height can be anything but header + content + footer heights must be 100% or the page will scroll */
    border:0;
}

.content {
    height:84%;
    color:white;
    border:1px solid black;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    /* keeps height at 84% instead of 84% + 2px for border */
}

footer {
    height:8%;
    background:darkred;
    color:white;
}

~~将.wrap min-height更改为高度并添加高度：100％to .content~~

Answer 2

您可以在inset上使用.wrap unblur框阴影，因此它不应该打扰您的布局：http://jsfiddle.net/VNc33/5/

.wrap {
    margin:0 auto;
    position:relative;
    width:400px;
    min-height:100%;
    background:lightblue;
    box-shadow:inset 0 0 0 1px;/* here fake an inside border of 1 pixel with text color if none declared */
}

header { background:lightblue;/* background hides inset box-shadow from parent */} http://jsfiddle.net/VNc33/8/您可以从.content中删除除最顶层的边框：http://jsfiddle.net/VNc33/9/。

Answer 3

使用另一种CSS方法来构建fullHeight模板，您可以使用标记使用的显示属性来设置可变高度的页眉和页脚。（<footer>）内的.wrap

此方法在IE版本8中可用，较低版本将忽略display：table / table-row / table-cell属性并将使用默认显示。http://jsfiddle.net/VNc33/11/

body, html {
    height:100%;
    margin:0;
    padding:0;
}
header {
    height:50px;
}
.wrap {
    margin:0 auto;
    width:400px;
    display:table;
    height:100%;
    background:lightblue;
}
.content {
    color:white;
    border:1px solid black;
}
footer {
    height:50px;
    background:darkred;
    color:white;
}
header img {
    vertical-align:top;/* or bottom  or display:block */
}
header,  footer {
    display:table-row;
}
.content {
    display:table-cell;
    height:100%;
    border:solid 1px solid;/* just put the border here */
}

将边框应用于.content的简便方法，而不介意保留多少内容

边框仅限于具有粘性页脚布局的全高容器的内容

3 个答案: