带固定顶栏和页脚的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％高度图像（不固定）

回答

相关问题