在CSS布局中，尝试设置container高度为100%以填充整个页面，但仍然出现大片空白。问题可能源于浏览器默认样式、盒模型设置或定位属性。通过检查代码，发现已使用`box-sizing:border-box`并设置了`height:100%`，但容器的padding可能导致了空白。尝试调整`height`计算方式或移除不必要的定位可能能解决问题。
我希望 container的div上面留20px给 header 下面留20px给 footer ，然后页面剩下的部分全部是container
右侧留20px给right，剩下的部分都是container，不要留空白
现在我虽然设置container的高度为100% ，但是还是会留下很大的空白，请问是什么原因造成这样的
怎么修改才能让空白消失。
无标题文档div {
box-sizing: border-box;
}
.header {
height: 20px;
background: rgba(51,255,255,1);
}
.container {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
background: rgba(51,0,153,1);
height: 100%;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 50px;
background:rgba(204,0,51,1);
height: 100%
}
.footer {
height: 20px;
background: rgba(153,0,0,1);
}
- 111
- 222
- 333
修改后的代码，还是会出现大片的空白
无标题文档html, body, div, p, ul, li, ol, dl, dt, dd, pre, code, table, tr, td, form, fieldset,
legend, button, input, textarea, h1, h2, h3, h4, h5, h6, hr, blockquote {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
html {
height: 100%;
}
.header {
height: 20px;
background: rgba(51,255,255,1);
}
.container {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
background: rgba(51,0,153,1);
height: 100%;
}
.container ul {
list-style: none;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 50px;
background:rgba(204,0,51,1);
height: 100%
}
.footer {
height: 20px;
background: rgba(153,0,0,1);
}
- 111
- 222
- 333
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
