Css 滚动条导致底部填充

因此，我开始用表单构建页面，在设置页脚样式时，我立即遇到了问题。由于页面上的垂直滚动条（我几乎可以肯定这是造成它的原因），页面有某种“填充”，使页脚的底部为

bottom:0悬停在页面底部上方约40px处。
是否有任何方法可以修复此问题，而不必使用
overflow:hidden

下面是HTML和CSS

<div class='center-column'>
  <h2 class='address_box-title'>This is the title that I wish to give this piece of work</h2>
  <textarea class='text_input'></textarea>
  <p class='content'>This is a slice of text that I'm serving up to you as a placeholder for all the fabulous content that will be put in here later on.</p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>
<footer></footer>

问题是代码笔中的文件semantic.css具有
高度：100%用于主体。这与您自己的CSS中的2em上边距相结合，导致文档的总高度为100%+2em高，或始终高于视口，无论内容有多大

解决方案很简单：只需将
body{height:auto；}
放在您自己的CSS中，将iot设置回默认值，然后只有当有要滚动的内容时才会显示滚动条

（请注意，在这种情况下，页脚将部分隐藏内容，因为它在堆叠顺序中位于页脚之上，但这是一个完全不同的问题。）


html正文{height:auto；}/*新建*/
页脚{
显示：块；
位置：绝对位置；
保证金：0；
底部：0；
身高：12%；
宽度：100%；
背景色：红色；
}
.中柱{
高度：自动；
宽度：32%；
利润率：2em 0px 0px 35%；
}
button.ui.button{
边缘底部：0.75em；
}
textarea.text\u输入{
边框：实心；
背景色：#62ddfc；
溢出：隐藏；
利润底部：8%；
填充：20px 25px 0px 25px；
高度：4em；
宽度：100%；
大纲：无；
颜色：白色；
字号：22号；
调整大小：无；
}
文本区域：焦点{
边界：无；
-网络工具包盒阴影：0px 0px 2px 0px rgba（0,0,0,0.75）；
-moz盒阴影：0px 0px 2px 0px rgba（0,0,0,0.75）；
盒影：0px 0px 2px 0px rgba（0,0,0,0.75）；
}
.地址框标题{
字体系列：“无衬线”；
字号：28pt；
宽度：自动；
利润率：20px2%10px2%；
}
p、 内容{
}
@媒体屏幕和屏幕（最大宽度：600px）{
.中柱{
左边距：10%；
宽度：80%；
}
页脚{
高度：16em；
}
}

这是我想给这件作品的标题
kjkljklj
这是我提供给你们的一段文字，作为所有精彩内容的占位符，这些内容稍后将放在这里




不幸的是，您的代码没有重现该问题。看见无论我是否调整结果窗格的大小，以使滚动条显示或不显示，页脚始终位于底部。（好吧，直到我滚动为止；您可能打算
位置：fixed
）。那么你能做一个演示这个问题的例子吗？哦，对不起，我忘了添加一些可能很重要的东西，这段代码是在一个代码笔中。我本来会链接它，但堆栈交换总是会阻止它。那时我可能忘记了一些关键代码，原来的代码笔在这里^对不起，但在代码笔中我似乎也找不到问题。你能把你看到的截图贴出来吗？非常感谢，这正是我想要的。我知道这只是一个小错误，但我找不到在哪里。谢谢
html{
  padding:0;
  margin:0;
}

body{
  padding:0;
  margin:0;
}


footer{
  display:block;
  position:absolute;
  margin:0;

  bottom:0;

  height:12%;
  width:100%;
  background-color:red;

}



.center-column{
  height:auto;
  width:32%;
  /*this line is a result of me not knowing yet how to center things horizontally*/
  margin:2em 0px 0px 30%;
}


textarea.text_input{
    border: solid;
    background-color:#62ddfc;

    overflow:hidden;

    margin-bottom:8%;
    padding:20px 25px 0px 25px;

    height:4em;
    width:100%;

    outline: none;
    color:white;

    font-size:22pt;

    resize: none;
}

textarea:focus{
  border:none;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}


.address_box-title{
  font-family:"sans-serif";
  font-size:28pt; 
  width:auto;
  margin:20px 2% 10px 2%;
}