时间戳

首页 > 解决方案 > 在使布局灵活以获取更多内容方面，我做错了什么？

html - 在使布局灵活以获取更多内容方面，我做错了什么？

问题描述

我希望内容容器能够无限制地拉伸以适应我放入其中的任何内容，同时将页脚向下推。

现在它只是达到了某个点并超出了页脚。

我究竟做错了什么？

这是基本的CSS：

html,body{
  margin: 0;
  height: 100%;
  min-height: 100%;
  
}

.header{ 
  border-bottom: solid 2px;
  height: 8%;
  background-color: #dfd8c8;
  display: grid;
  grid-template-columns: auto 5% 5%;
}

grid-item-header {
  
  display: flex;
  align-items: flex-end;  
}

.body{
  overflow: auto;
  
  height: 92%; 
  background-color: #a39274;
  display: grid;
  grid-template-columns: 
    auto auto auto 15%;
  
  grid-template-rows:90% auto;
  grid-template-areas: 
  "content content content toolbar" 
  "footer footer footer footer";
  
    
}

.toolbar{
  border-right: solid 1px;
  border-left: solid 1px;
  padding-top: 2%;
  grid-area: toolbar;
  background-color: #368cbf ;
  text-align: center;
}

.footer{ 
  
  border-top: solid 2px; 
  text-align: center;
  grid-area: footer;
  background-color: #252523 ;
}

标签： htmlcss

解决方案

如果很好地理解了您的问题，您只需height: 100%; min-height: 100%;从身体元素中删除即可。像那样

html,body{
  margin: 0;
}

推荐阅读