Question

所以我开始使用表单构建一个页面，并在设置页脚样式时立即遇到问题。由于页面上的垂直滚动条（我几乎肯定会导致它），页面有某种＆＃34;填充＆＃34;离开页脚，Set在页面底部上方悬停约40px。有没有办法解决这个问题，而不必使用Comparator？

以下是HTML和CSS。

Comparator.comparingInt()

和CSS：

Map<YouRecord, Integer>

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

滚动条会导致底部填充

1 个答案: