Question

我已经创建了一个div，我希望从顶部开始20％，然后转到页面底部的任何位置。问题是div赢得了扩展＆＃34;当内容比网站显示的内容多而不滚动时。我的解释很糟糕，但只要看看jsfiddle，你就会得到它：）

＆＃13;

.mainContent {
    background-color: rgb(220, 220, 220);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 20%;
    margin: 0 auto;
    text-align: center;
    }

＆＃13;

    <div id="mainContent" class="mainContent">
     <div id="mainContentText" class="mainContentText">
     <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
    </div>
    <div id="commonGuides" style="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
    </div>
    </div>

＆＃13;

编辑：我的问题与How to make a div 100% height of the browser window?不一样。问题是如何在用户调整窗口大小时（至少从我的理解中）改变div的高度，而我想做的是将div设置为与其中的内容一样高，以便没有内容可以在div之外。

Answer 1

选项1：min-height

如果您希望div至少为100％，则只需使用min-height，但可以使用内容进行扩展。

请参阅更新的小提琴：https://jsfiddle.net/rvv7an5h/1/

选项2：排名

删除position: absolute，以便将元素放置在文档的正常流程中。这样，高度的计算方式也不同。

更新了小提琴：https://jsfiddle.net/rvv7an5h/2/

说明：当您使用height: 100%时，您得到的是一个完全100％父元素的元素。意思是如果内容小于或高于100％，则元素的高度保持为100％。

现在从上面的答案中，元素的最小（最小）高度为100％，因此如果元素的内容超过100％，元素的高度会随之增加。

Answer 2

使用height:100时，div将占用100％的窗口高度，而div的内容将无法增加其高度，

要避免这种情况，最好的方法是使用min-height:100%;代替

.mainContent {
  background-color: rgb(220, 220, 220);
  min-height: 100%;
  width: 100%;
  position: absolute;
  top: 20%;
  margin: 0 auto;
  text-align: center;
}

<div id="mainContent" class="mainContent">
  <div id="mainContentText" class="mainContentText">
    <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
  </div>
  <div id="commonGuides" style="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
  </div>
</div>

Answer 3

将height:100%更改为height:auto.

使用height:100%，您的容器将获得当前视口的高度，而不是所有内容。如果要在默认情况下显示内容的完整高度：将min-height: 100vh添加到容器中。

Answer 4

无需使用position: absolute。只需将margin-top:20%设置为div mainContent。

＆＃13;

.mainContent {
  background-color: rgb(220, 220, 220);
  width: 100%;
  position: relative;
  margin: 20% auto 0;
  text-align: center;
}

body {
  margin: 0;
}

＆＃13;

<div id="mainContent" class="mainContent">
  <div id="mainContentText" class="mainContentText">
    <h1> guides </h1>
    <h2> Here are some guides ya fool.</h2>
  </div>
  <div id="commonGuides" style="commonGuides">
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Here they are:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Comin' up!:</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>Just keep scrolling a little more!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>ALMOST THERE!</h3>
    <h3>The guides were a lie.</h3>
  </div>
</div>

＆＃13;

Div设置为100％高度，但它不会填充屏幕

4 个答案: