Question

这可能不适用于CSS，但也许我错了：

我有这样的文档结构：

BODY
  DIV[A]
    DIV[B]

DIV [A]是position:absolute，固定在屏幕上并以屏幕为中心。它没有高度设置。

DIV [B]为position:absolute top:300px。这是DIV的实际内容。在里面，我用位置定位所有东西：绝对。因为我喜欢职位：绝对。它完全控制定位。没有丑陋的文字流头痛......真是太棒了。

确定。但现在的问题是：DIV [B]总是只有height我所说的。现在，也许有一个很酷的CSS技巧可以将它拉到触摸浏览器视口的底部？

Answer 1

要将高度设置为动态为窗口高度 - DIV [A]的高度，您必须使用JavaScript / jQuery并继续使用SetTimeout调用它。

或者，如果它符合您的需要，您可以将DIV [B]设置为position:fixed; bottom:0px;

<body onload="setupLayout();" >
...


  <script language="javascript" type="text/javascript">
    // ACTIVITIES TO RUN FOR THE PAGE
    function setupLayout() {
        setInterval('adjustLayout();', 1000);
    }

    // ADUST THE MAIN CONTAINER (content panel) LAYOUT
    function adjustLayout() {
        try {
            var divB = $get('divB');
            var divAHeight = 20px;
            divB.style.height = document.body.clientHeight - divAHeight ;
        }
        catch (e) { }
    }
  </script>
</body>

Answer 2

我认为DIV [A]是您的标题，DIV [B]是您的主要内容div，您希望在没有大量文字的情况下，您的内容div始终占用所有页面，对吧？

如果我没记错的话，因为我现在无法测试，你可以：

html, body {
  height: 100%;
}

DIV[B] {
  height: 100%;
}

我认为应该这样做。

编辑：以下是一个可以帮助您的好例子：http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 3

当您希望DIV成为一个位置：绝对时，它应该位于position: relative容器中。

<div style="position: relative">
  <div style="position: absolute; top: 300px">
    <h3>Content Header</h3>
    <!-- Content -->
  </div>
</div>

关于DIV [B]的问题，您可以在<table>和<div>之间进行混音。

Answer 4

#div_to_touch_the_bottom {
   position:fixed;
   bottom:0;
   top:0;
   left:25%;
   right:25%;
}

此DIV将触及视口的底部，您可以根据需要修改其左右。我不确定这是你所看到的答案，但它可能是一个好的开始

如何强制DIV向下延伸到屏幕底部？

4 个答案: