僅在具有粘性頁腳布局的全高容器的內容上邊框

Question

大家好，這困擾了我幾個小時。

我正在使用布局來獲取全高容器和粘性頁腳。 不幸的是，我只想要內容中的邊框，但它並沒有擴展到頁腳。 我可以嘗試給wrap div加上邊框，但是我不希望標題帶有邊框。 我唯一能想到的就是給標題設置背景的邊框顏色，但是我不想這樣做。

還有另一種方法可以做到這一點嗎？

http://jsfiddle.net/VNc33/14/

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

圖片

Answer 1

小提琴

<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最小高度更改為正好高度，然后將height：100％添加到.content~~

Answer 2

您可以在.wrap上使用inset模糊框陰影，因此它不會打擾您的布局： 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。網絡/ VNc33 / 9 / 。

Answer 3

通過另一種CSS方法來構建fullHeight模板，可以使用tags使用的顯示屬性，使頁眉和頁腳的高度可變。 （ .wrap內的<footer> ）

此方法在版本8的IE中可用，較低版本將忽略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 個解決方案

解決方案1
0 2014-02-09 11:26:58

解決方案2
0 2014-02-09 11:42:10

解決方案3
0 2014-02-09 15:41:14

僅在具有粘性頁腳布局的全高容器的內容上邊框

問題描述

3 個解決方案

解決方案1 0 2014-02-09 11:26:58

解決方案2 0 2014-02-09 11:42:10

解決方案3 0 2014-02-09 15:41:14

解決方案1
0 2014-02-09 11:26:58

解決方案2
0 2014-02-09 11:42:10

解決方案3
0 2014-02-09 15:41:14