Question

＆＃13;

<header>Title</header>

<div class="main-wrapper">
  <h1>content</h1>
</div>

<footer>Footer</footer>

＆＃13;

如何定义height的{{1}}，以便内容覆盖整个页面，页脚停留在页面底部。即使主包装div中的内容非常少。

Answer 1

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
  padding: 70px 0;
}

<body>
    <div id="header"></div>
        <div id="content"><div>
        Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content 
        </div>
    </div>
    <div id="footer"></div>
</body>

Answer 2

你首先缺少一个身体。

但无论如何，这是你的答案，使用flexboxes（更改容器的高度以查看它的行为）：

.container {
  display: flex; 
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  align-content: center;
  height: 600px;
}

.main-content {
  flex: 1 1 auto;
  background: lightblue;
  padding: 15px;
}

.footer {
  flex: 0 0 60px;
  line-height: 30px;
  padding: 15px;
  background: lightgray;
  box-sizing: border-box;
}

<div class="container">
  <div class="main-content">
    This is the main content, background is lightblue
  </div>
  <div class="footer">
    This is the footer, background is lightgray
  </div>
</div>

Answer 3

如果希望主包装内容覆盖整个页面，则应将主包装的高度设置为100％。然后，您应该将html和body的高度设置为100％。

<强> CSS

.main-wrapper{
height: 100%;
}
body, html {
height: 100%;
}

Answer 4

.main-wrapper{
position:relative;
height:calc(100vh - 80px);
background-color:orange;
}

<header>Title</header>

<div class="main-wrapper">
    <h1>content</h1>
</div>


<footer>Footer</footer>

vh =视口高度（即页面高度被视为100vh），因此请相应地使用calc和设置高度

如何定义主div自动的高度？

4 个答案: