Question

我简化了下面的布局，以显示我的意思。两列都需要100％，但问题是如果1列中有内容将其拉伸到导致滚动条的100％高度以下，那么另一列将保持100％的窗口高度。有没有办法确保两个div总是占用文档的整个高度？如果你使用下面的html，你会看到当你向下滚动时，左列高度保持在窗口的原始高度。没有javascript有解决方案吗？谢谢！

<!DOCTYPE html>
<html>  
<head>
<style>
    html,body {
        min-height: 100%;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .column {
        min-height: 100%;
        background: red;
        position: absolute;
        width: 200px;
    }

    #left {

        left: 100px;
    }

    #right {
        left: 400px;
    }

    #content {
        /* This height will be unknown. 2000px is just for example to push right column down*/
                height: 2000px;
    }

</style>
</head>
<body>
<div id="left" class="column"></div>
<div id="right" class="column">
    <div id="content"></div>
</div>
</body>
</html>

Answer 1

尝试使用此Css -

.column {
        height: 100%;
        background: red;
        position: absolute;
        width: 200px;
    }

#left {

    left: 100px;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

#right {
    left: 400px;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

工作小提琴 - http://jsfiddle.net/vR4eU/

为什么会这样：

我们通过添加padding-bottom：1000px让div看起来很长，然后通过使用margin-bottom：-1000px欺骗浏览器它是不正确的。请参阅此blog，以便更好地解释解决方案。

更新：可能Faux columns是一种更好的跨浏览器兼容方式，可以帮助您。见 - http://www.alistapart.com/articles/fauxcolumns/

Answer 2

如果它只是推动高度的内容，你可以通过将其设置为最大高度：100％或给它溢出来解决它：隐藏以阻止它发生。

Answer 3

<!DOCTYPE html>
<html>  
<head>
<style>
body, html {
  height: 100%; /* make it fill up the screen, when content longer than 100%, will cause overflow as expected */
}

.wrapper {
  min-height: 100%; /* we don't want overflow in this layer. so make it flexible */
  position: relative;
}

.column {
  border: 4px red dashed; /* to see the moving of the block when scroll. */
  width: 200px;
}

#left {
  /* this need to be always the same height of .wrapper, which is at least 100% in height. */
  position: absolute;
  top: 0;       
  bottom: 0;
  left: 100px;
}

#content {
  /* this can have any height you want it will change the height of .wrapper when it grows. but you can't use percent unit! */
  margin-left: 400px;
  min-height: 600px;
}

</style>
</head>
<body>
<div class="wrapper">
  <div id="left" class="column"></div>
  <div id="content" class="column"></div>
</div>
</body>
</html>

这适用于所有现代浏览器（IE7可能不适用于此版本，因为它不支持min-height，因为它在IE9的IE7模式下工作正常。查看previous one）。此解决方案使左列始终保持.wrapper的高度，这将自动适应内部内容的高度，并且无论#content的高度如何，都保持最小高度100％。< / p>

查看demo。

如果您需要一些视觉效果，例如在右侧显示背景或边框，则使内容看起来像拉伸至少100％的高度。您可以使用其他装饰框，例如#left，并使其位于#content后面。这在视觉上满足了您的需求，您不必编写任何脚本XD。享受

为此查看demo。

2列绝对布局需要两者都是100％高度

3 个答案: