帶固定頂欄和頁腳的100％高度圖像（不固定）

我有一個頂欄，它已修復，當您滾動屏幕時會出現一個頁腳。我想用100％投入圖片，但問題在於，當您向下滾動時，頁腳會覆蓋它們，我該如何避免這種情況？帶固定頂欄和頁腳的100％高度圖像（不固定）

這是我的代碼：

<body ng-cloak> 
    <topbar></topbar> 
    <img src="img/leftImage.jpg" id="leftImage" /> 
    <div id="homescreen" class="container"> 
     <div ui-view></div> 
    </div> 
    <img src="img/rightImage.jpg" id="rightImage" /> 
    <footer></footer> 
</body> 

body { 
    background: url(/img/background.jpg) repeat fixed; 
    background-position-y: -50px; 
    background-position-x: -50px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#homescreen { 
    margin-top: 150px; 
} 

#leftImage{ 
    top: 0; 
    left: 0; 
    width: 150px; 
    height: 100%; 
    position: fixed; 
} 

#rightImage{ 
    top: 0; 
    right: 0; 
    width: 150px; 
    height: 100%; 
    position: fixed; 
}

我知道，如果我把底部：0 height屬性會做也無妨。如果我不清楚，請問我。謝謝！

來源

2017-04-16 Motomine

Flexbox，就可以幫你acheive一個棘手的註腳：

HTML：

<body class="flexbox-wrapper"> 
    <main class="page-wrapper"> 
    <header>HEADER</header> 
    <div class="content">CONTENT</div> 
    </main> 
    <footer>FOOTER</footer> 
</body>

CSS：

/* CSS reset*/ 
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
/* styling*/ 
header, footer, .content { 
    padding: 25px; 
} 
header { 
    background: #eee; 
} 
footer { 
    background: #ddd; 
} 

/* needed code for sticky footer */ 
html, body { 
    height: 100%; 
} 

.flexbox-wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
} 

.page-wrapper { 
    flex: 1 0 auto; 
}

http://codepen.io/dreiv/pen/bgaBam

與此頁腳將在底部該內容默認或在內容的底部比視口大。

來源

2017-04-16 20:59:06

您可以使用position: relative; z-index: 1爲footer

，因爲你的右側和左側塊是固定的，這將是在頂部，所以你需要使它上面頁腳。如果腳註低於方塊，則增加頁腳z-index的值。

爲#leftImage和#rightImage刪除height和bottom

例如利用價值，這裏是一個塊中的代碼

#leftImage { 
    top: 0; 
    left: 0; 
    width: 150px; 
    bottom: 20px; /* same as the height of footer */ 
    position: fixed; 
} 

footer { 
    height: 20px; 
}

來源

2017-04-16 20:59:07 Lucian

的問題是，我不希望覆蓋的形象，我希望圖像可以延伸到頁腳開始，如果頁腳有50 px的高度，我希望圖像有50％的底部，所以它們不覆蓋。 – Motomine

帶固定頂欄和頁腳的100％高度圖像（不固定）

回答

相關問題