html和css制作网页页面底部,将div扩展到页面底部(仅HTML和CSS)

解决方案：#1：css表：

html,body

{

height:100%;

width:100%;

}

body

{

display:table;

}

#top, #bottom

{

width: 100%;

background: yellow;

display:table-row;

}

#top

{

height: 50px;

}

#bottom

{

background: lightgrey;

height:100%;

}

解决方案#2：使用calc和viewport单位

#top

{

height: 50px;

background: yellow;

}

#bottom

{

background: lightgrey;

height: calc(100vh - 50px);

}

解决方案#3 – Flexbox

html, body

{

height: 100%;

}

body

{

display: flex;

flex-direction: column;

}

#top

{

height: 50px;

background: yellow;

}

#bottom

{

background: lightgrey;

flex:1;

}