Question

＆＃13;

body{
  padding:0px;
  margin:0px;
  }

header{
  width :100%;
  background-color :orange;
  height :60px;
  }
main{
  width:100%;
  background-color :blue;
  /*height :60px;*/
  /*margin-top:60px;*/
  height: calc(100% - 105px);
  
  }
footer{
  position :fixed;
  bottom :0;
  height:45px;
  background-color :green; 
  width :100%;
  }

＆＃13;

<body>
  <header> </header>
  <main> 
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
  </main>
  <footer> </footer>
</body>

＆＃13;

在上面的代码中，我试图创建3个区域内容区域，页眉区域和页脚区域。在这三个页脚区域中，位置property:fixed，其他区域不固定，这意味着哪个可以如果有更多内容，则滚动。但这并没有像我预期的那样给我输出，这显示了一些额外的空格。我可以解决这个问题吗？

Answer 1

首先，使用CSS重置删除任何默认边距＆amp;填充。

然后，您需要将html和body元素设置为height:100%才能获得您想要的效果。

将min-height:100%添加到body将允许其他内容。

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}
html,
body {
  height: 100%;
}
body {
  min-height: 100%;
}
header {
  width: 100%;
  background-color: orange;
  height: 60px;
}
main {
  width: 100%;
  background-color: blue;
  /*height :60px;*/
  /*margin-top:60px;*/
  height: calc(100% - 105px);
}
footer {
  position: fixed;
  bottom: 0;
  height: 45px;
  background-color: green;
  width: 100%;
}

＆＃13;

<header></header>
<main>
  <p>content....!</p>
  <p>content....!</p>
  <p>content....!</p>
  <p>content....!</p>
  <p>content....!</p>
  <p>content....!</p>
</main>
<footer></footer>

＆＃13;

Answer 2

试试这个

＆＃13;

body{
  padding:0px;
  margin:0px;
width: 100%;
height: 100%;
  }

html {
	width: 100%;
	height: 100%;
}

   p {
	margin:0;
}

header{
  width :100%;
  background-color :orange;
  height :60px;
  }
main{
  width:100%;
  background-color :blue;
  /*height :60px;*/
  /*margin-top:60px;*/
  height: calc(100% - 105px);
  
  }
footer{
  position :fixed;
  bottom :0;
  height:45px;
  background-color :green; 
  width :100%;
  }

＆＃13;

<body>
  <header> </header>
  <main> 
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
  </main>
  <footer> </footer>
</body>

＆＃13;

Answer 3

body{
  padding:0px;
  margin:0px;
  }

header{
  width :100%;
  background-color :orange;
  height :60px;
  }
main{
  width:100%;
  background-color :blue;
  position: relative;
  top: -16px;
  height: calc(100% - 45px);
  
  }
footer{
  position :fixed;
  bottom :0;
  height:45px;
  background-color :green; 
  width :100%;
  }

<body>
  <header> </header>
  <main> 
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
  </main>
  <footer> </footer>
</body>

Answer 4

body{
  padding:0px;
  margin:0px;
  }

header{
  width :100%;
  background-color :orange;
  height :60px;
margin-bottom:-16px;
  }
main{
  width:100%;
  background-color :blue;
  /*height :60px;*/
  margin-top:0px;
  height: calc(100% - 105px);
  
  }
footer{
  position :fixed;
  bottom :0;
  height:45px;
  background-color :green; 
  width :100%;
  }

<body>
  <header> </header>
  <main> 
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
      <p>content....!</p>
  </main>
  <footer> </footer>
</body>

如何删除具有不同位置属性的两个标签之间的空白？

4 个答案: