如何使内容高度触及页脚顶部，背景颜色为一行内容 [英] How to make content height touch the footer top with background colorand with one line content in it
本文介绍了如何使内容高度触及页脚顶部，背景颜色为一行内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< ！DOCTYPE html >
< html >
< head >
< style >
html ， body { height ： 100％; }
。 wrapper { position ： relative; min-height ： 100％; }
。 header { height ： < span class =code-keyword> 100px; left ： 0; top ： 0; background-color ： red ; }
。 content { background-color ： blue; }
。 footer { position ： 绝对; left ： 0; bottom ： 0; background-color ： 黄色; height ： 100px; }
< ; / 样式 >
< / head >
< 正文 >
< div class = wrapper >
< div class = header >
这是标头
< / div >
< div class = content >
此内容< br >
< / div >
< div < span class =code-attribute> class = footer >
这是页脚
< / div >
< / div >
< / body >
< / html >
我尝试了什么：
i试图保持
。 content {
bottom ： 0; || padding-bottom ： 100px; || margin-bottom ： 0px;
background-color ： blue;
}
解决方案
试试这个
< ！DOCTYPE html >
< html >
< head >
< 样式 >
html { height ： 100％}
body {height ： 100％; position ： relative; }
。 header {职位 ： 绝对; height ： 100px; width ： 100％; left ： 0; 顶部 ： 0; bac kground-color ： red; }
。 content { height ： 100％; width ： 100％; background-color ： blue; padding-top ： 110px; 颜色 ： white; }
。页脚 { position ： 绝对; left ： 0; bottom ： 0; background-color ： 黄色; height ： 100px; width ： 100％ ; }
< / style >
< / head >
< body >
< div class = 标题 >
这是标题
< < span class =code-leadattribute> / div >
< div class = content >
此内容< span class =code-keyword>< br >
< / div >
< div class = footer >
这是页脚
< / div >
< / body >
< / html >
这个问题的完美解决方案我终于找到了
只需保持
.header，.footer {height：20％; }
.content {min-height：80％;}
！DOCTYPE html>
< html >
< head >
< style >
html ， body { height ： 100％; }
。 wrapper { position ： relative; min-height ： 100％; }
。 header { height ： 20％; left ： 0; top ： 0; background-color ： 红色; }
。内容 {背景-color ： blue; min-height ： 80％; }
。页脚 { position ： absolute; left ： 0; <温泉n class =code-attribute> bottom ： 0; background-color ： 黄色; 高度 ： 20％; ; width ： 100％; }
< / 风格 >
< / head >
< body >
< div class = 包装 >
< div class = header >
这是标头
< / div >
< div class = content >
此内容< br >
< / div >
< div < span class =code-attribute> class = 页脚 >
这是页脚
< / div >
< / div >
< / body >
< / html >
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%;}
.wrapper{position:relative; min-height:100%;}
.header{height:100px; left:0;top:0; background-color:red;}
.content{background-color:blue;}
.footer{position:absolute;left:0;bottom:0; background-color:yellow;height:100px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
This is header
</div>
<div class="content">
This content <br>
</div>
<div class="footer">
this is footer
</div>
</div>
</body>
</html>
What I have tried:
i tried to keep
.content{
bottom:0; || padding-bottom:100px; || margin-bottom:0px;
background-color:blue;
} 解决方案
Try this
<!DOCTYPE html> <html> <head> <style> html {height:100%} body{height:100%; position:relative;} .header{position:absolute; height:100px; width:100%; left:0;top:0; background-color:red;} .content{ height:100%;width:100%; background-color:blue; padding-top:110px; color:white;} .footer{position:absolute;left:0;bottom:0; background-color:yellow;height:100px; width:100%;} </style> </head> <body> <div class="header"> This is header </div> <div class="content"> This content <br> </div> <div class="footer"> this is footer </div> </body> </html>
Perfect Solution for this question i finally found
just keep
.header, .footer{height:20%;}
.content{min-height:80%;}
!DOCTYPE html> <html> <head> <style> html,body{height:100%;} .wrapper{position:relative; min-height:100%;} .header{height:20%; left:0;top:0; background-color:red;} .content{background-color:blue;min-height:80%;} .footer{position:absolute;left:0;bottom:0; background-color:yellow;height:20%;; width:100%;} </style> </head> <body> <div class="wrapper"> <div class="header"> This is header </div> <div class="content"> This content <br> </div> <div class="footer"> this is footer </div> </div> </body> </html>
这篇关于如何使内容高度触及页脚顶部，背景颜色为一行内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
