这是一种方法,我使用的重要属性是：
box-sizing:border-box ——– padding —– display:table-cell —-position:relative for footer —
内容很少的第一个片段
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%
}
#cont {
box-sizing: border-box;
padding-bottom: 70px;
display: table;
width: 100%;
height: 100%;
}
.footer {
position: relative;
top: -70px;
height: 70px;
z-index: 10;
background: red;
}
.left-column > div {
background: blue;
padding: 20px;
color: white;
}
.right-column {
background: orange;
}
.left-column,
.right-column {
box-sizing: border-box;
min-height: 100%;
display: table-cell;
width: 50%;
}
Content
带滚动条的更多内容的第二个片段
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%
}
#cont {
box-sizing: border-box;
padding-bottom: 70px;
display: table;
width: 100%;
height: 100%;
}
.footer {
position: relative;
top: -70px;
height: 70px;
z-index: 10;
background: red;
}
.left-column > div {
background: blue;
padding: 20px;
color: white;
}
.right-column {
background: orange;
}
.left-column,
.right-column {
box-sizing: border-box;
min-height: 100%;
display: table-cell;
width: 50%;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
