Question

我希望left-div高度为窗口的100％。

<div id="left-div"></div>

    <div id="content">

        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>   
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>   
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>

    </div>

这是完整的代码： http://jsfiddle.net/Fs6yE/

我已经为html和body标签应用了背景。所以这是不可能的。还有其他办法吗？

Answer 1

实现它的唯一方法就是使用jQuery。下面的方法将允许调整大小

    function myResize() {
            $('#left-div').height($('#content').outerHeight());
        };

        myResize();

        $(window).load(function(){
            myResize();
        });


        $(window).resize(function() {
            myResize();
        });

将CSS添加到#content

overflow: hidden;

http://jsfiddle.net/9Hq6c/

其他方法涉及使两个元素成为同一父元素的子元素，并在父元素上具有指定的高度，或者在#content元素下具有背景的一些css hacks。

Answer 2

将margin: 0;添加到您的body CSS，如下所示：

body {
  background:#FCFCFC;
  margin: 0;
}

<强> See updated fiddle

Answer 3

当您将元素设置为100％时，请始终考虑“100％的内容？”。它始终是该元素的父元素。在您的情况下，父元素是正文，它不设置为任何东西。因此将其设置为100％高度。

然后问问自己，100％的是什么？正文的父亲是html元素。所以将它设置为100％的高度。

Answer 4

您需要更改一些css项才能使其正常工作。

首先，thumbnail类需要删除float:left。将float替换为display:inline-block。这样做的原因是因为float从身体容器的高度消失了。因此，body不是2000px高，而是只有200。

接下来，将position:relative添加到body标记css中。您的left-div为position:absolute。绝对定位是相对于另一个容器的，并且通过将css添加到body标签，您说left-div应该绝对位于body标记内。

最后，将background-repeat:repeat-y添加到left-div css。这是UPDATED FIDDLE我的更改。

如何获得此元素的100％高度？

4 个答案: