css - 滚动条导致底部填充

Question

因此，我开始使用表单构建页面，并且在设置页脚样式时立即遇到了问题。由于页面上的垂直滚动条（我几乎可以肯定是它造成的），页面有某种“填充”，使页脚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>

和CSS：

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%;
}

标签： cssscrollbar

Answer 1

问题是您的 codepen 中的文件 semantic.cssheight: 100%;用于正文。这与您自己的 CSS 中的 2em 上边距相结合，导致文档的总高度为 100% + 2em 高，或者总是高于视口，无论内容有多大。

解决方法很简单：只要body {height:auto;}在自己的CSS中把iot设置回默认值，然后滚动条只有在有内容可以滚动到的时候才会出现！
（请注意，在这种情况下，页脚将部分遮挡内容，因为它在堆叠顺序中位于其上方，但这是一个完全不同的问题。）

html body {height:auto;} /* new! */

footer{
  display:block;
  position:absolute;
  margin:0;
  
  bottom:0;
  
  height:12%;
  width:100%;
  background-color:red;
  
}

.center-column{
  height:auto;
  width:32%;
  
  
  margin: 2em 0px 0px 35%;
}

button.ui.button{
  margin-bottom:0.75em;  
}

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%;
}


p.content{
  
}


@media screen and (max-width:600px){
  .center-column{
    margin-left:10%;
    width: 80%;
  }
  
  footer{
    height:16em;

  }


}

<link href="https://unpkg.com/simplebar@latest/dist/simplebar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css" rel="stylesheet"/>

<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>
  <button class='ui button'>kjkljklj</button>
  <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>