Question

我一直试图找出答案。基本上，这个想法是将所有盒子都聚集在一起，但是以某种方式最终在main和footer之间留出了很大的余量。请帮忙。

CSS

仅添加与三个方框相关的css ...

body{
     display: flex;
     flex-direction: column;
     justify-content: start;
     flex-wrap: wrap;
     height: 100vh;
     width: 100vw;
     margin: 0;
 }
 header{
     background-color: white;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     width:100vw;
     height: 10vh;
     margin: 0;
 }
 main{
     background-color: #f1f1f1;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     width: 100vw;
     height: 85vh;
     margin: 0;
 }
 footer{
     background-color: #666666;
     height: 4vh;
     width: 100vw;
 }

<body>
    <header>
        <div id="headercontentwrapper">
            <div id="logowrapper"></div>
            <div id="navwrapper"></div>
        </div>
    </header>
    <main>
        <div id="contentwrapper">
            <div id="contentheaderwrapper"></div>
            <div id="actualcontentwrapper"></div>
        </div>
    </main>
    <footer>
    </footer>
</body>

将页脚的“页边距”设置为0不起作用

Answer 1

为您的flexbox子项使用flex而不是height。

body{
       display: flex;
       flex-direction: column;
       justify-content: stretch;
       flex-wrap: wrap;
       height: 100vh;
       width: 100vw;
       margin: 0;
   }
   header{
       background-color: white;
       display: flex;
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
       width:100vw;
       flex: 0 0 10vh;
       margin: 0;
   }
   main{
       background-color: #f1f1f1;
       display: flex;
       flex-direction: row;
       justify-content: center;
       flex-wrap: wrap;
       width: 100vw;
       flex: 1;
       margin: 0;
   }
   footer{
       background-color: #666666;
       flex: 0 0 4vh;
       width: 100vw;
   }

<body>
  <header>
    <div id="headercontentwrapper">
      <div id="logowrapper"></div>
      <div id="navwrapper"></div>
    </div>
  </header>
  <main>
    <div id="contentwrapper">
      <div id="contentheaderwrapper"></div>
      <div id="actualcontentwrapper"></div>
    </div>
  </main>
  <footer>
  </footer>
</body>

Answer 2

正如我在评论中所说，您的代码看起来不错，也许还有其他原因引起了问题？

ps：我做了一个代码片段，并更正了您的标签

body {
	display: flex;
	flex-direction: column;
	justify-content: start;
	flex-wrap: wrap;
	height: 100vh;
	width: 100vw;
	margin: 0;
}

header {
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 100vw;
	height: 10vh;
	margin: 0;
}

main {
	background-color: #f1f1f1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 100vw;
	height: 85vh;
	margin: 0;
}

footer {
	background-color: #666666;
	height: 4vh;
	width: 100vw;
}

<html>
<head>
</head>
<body>
    <header>
        <div id="headercontentwrapper">
            <div id="logowrapper"></div>
            <div id="navwrapper"></div>
        </div>
    </header>
    <main>
        <div id="contentwrapper">
            <div id="contentheaderwrapper"></div>
            <div id="actualcontentwrapper"></div>
        </div>
    </main>
    <footer>
    </footer>
</body>
</html>

Answer 3

只需移除主机中的height: 85vh;，一切正常。问题在于您的身体的高度为100vh，而主体的高度为85vh。这就是为什么在“主要页脚和页脚之间有很大的余量”;）

希望有帮助！

为什么我的理由不成立：开始为Flexbox工作？

3 个答案: