Question

我希望旋转木马DIV（s7）扩展到整个屏幕的高度。我不知道它为什么没有成功。要查看该页面，您可以here。

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Answer 1

为了使百分比值适用于身高，必须确定父亲的身高。唯一的例外是 root 元素<html>，它可以是百分比高度。

所以，除了<html>之外，你已经给出了所有元素的高度，所以你应该做的就是添加：

html {
    height: 100%;
}

你的代码应该可以正常工作。

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

<强> JsFiddle example

Answer 2

_{因为没人提到这个..}

现代方法：

作为将html / body元素的高度设置为100%的替代方法，您还可以使用视口百分比长度：

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

在这种情况下，您可以使用值100vh（视口的高度） - (example)

body {
    height: 100vh;
}

设置min-height也有效。 (example)

body {
    min-height: 100vh;
}

大多数现代浏览器都支持这些单元 - support can be found here。

Answer 3

您还需要在html元素上设置100％的高度：

html { height:100%; }

Answer 4

或者，如果您使用position: absolute，则height: 100%可以正常使用。

Answer 5

您应该尝试使用父元素;

html, body, form, main {
    height: 100%;
}

那就足够了：

#s7 {
   height: 100%;
}

Answer 6

如果你想要，例如，左列（高度100％）和内容（高度自动）你可以使用绝对：

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

in html：

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

Answer 7

这可能不太理想，但您可以随时使用javascript。或者在我的情况下jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

Answer 8

这是针对不想使用html, body, .blah { height: 100% }的人们的另一种解决方案。

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Answer 9

在页面源代码中，我看到以下内容：

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

如果将高度值放在标记中，它将使用此值而不是css文件中定义的高度。

Answer 10

如果绝对将元素放在div中，可以将填充顶部和底部设置为50％。

这样的事情：

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

Answer 11

尝试使用calc和overflow函数

.myClassName {
    overflow: auto;
    height: calc(100% - 1.5em);
}

为什么不高度：100％工作将div扩展到屏幕高度？

11 个答案:

现代方法：