stretching div to fill body

2019-03-25 10:09发布

站内问答 / HTML/CSS
1781 3 6 

<html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
    <body style="height:100%;width:100%;">
        <div style="height:20px;background-color:red;"></div>
        <div style="background-color:black;"></div>
        <div style="height:20px;background-color:blue;"></div>
    </body>
</html>

How can I make the second div stretch to fill remaining space (after placing the first and third div) in the body?

标签： css layout html
举报
3条回答
Emotional °昔
2楼-- · 2019-03-25 10:33

If you want the stick footer system, then use this technique:

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;
}

.footer, .push {
    height: 20px;
}

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-03-25 10:33

If I understand your intent properly (who knows..):

Live Demo (edit)

HTML:

<div id="top"></div>
<div id="mid"></div>
<div id="bot"></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    color: #fff
}

#top, #mid, #bot {
    position: absolute;
    width: 100%
}

#top {
    height: 20px;
    background: red;

    top: 0;
}
#mid {
    background: #000;

    top: 20px;
    bottom: 20px
}
#bot {
    height: 20px;
    background: blue;

    bottom: 0
}
查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
4楼-- · 2019-03-25 10:37

Use all % or all pixels(find screen pixel height in js)

 <html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
    <body style="height:100%;width:100%;">
    <div style="height:3%;background-color:red;"></div>
    <div style="background-color:black; height:94%;"></div>
    <div style="height:3%;background-color:blue;"></div>
    </body>
    </html>

Other perfect answer derived from above answer

<html >
<style type="text/css">
* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;
}

.footer, .push {
    height: 20px;
}
.header {
    height: 20px;
}
</style>
<body >

<div class="wrapper" style="background-color:#ffcc00">
   <div class="header" style="background-color:#cccccc"></div>
   <div class="push"></div>
</div>
<div class="footer" style="background-color:#cccccc"></div>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)