3

我简化了下面的布局以显示我的意思。两列都需要为 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>
4

3 回答 3

0

试试这个 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 欺骗浏览器它不是真的。请参阅此博客以更好地解释解决方案。

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

于 2012-11-14T09:28:44.667 回答
0

如果它只是推动高度的内容，您可以通过将其设置为 max-height: 100% 或将其设置为溢出来解决它：隐藏以阻止它发生。

于 2012-11-14T09:31:33.367 回答
0 
<!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 可能不适用于此版本，因为它不支持最小高度，但它在 IE9 的 IE7 模式下工作正常。查看上一个）。此方案使左列始终保持 的高度.wrapper，这将自动适应内部内容的高度，并且无论高度#content是多少，都保持至少 100% 的高度。

查看演示。

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

查看演示。

于 2012-11-14T09:32:10.480 回答