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

我有一个文件的结构是这样的：

BODY 
    DIV[A] 
    DIV[B]

DIV [A]是position:absolute与固定和集中在屏幕上。它没有高度设置。

DIV [B]是position:absolute与top:300px。这是DIV的实际内容。在里面，我把所有东西都放在位置上：绝对的。因为我喜欢位置：绝对。它可以完全控制定位。没有丑陋的文字流动头痛......这很好。

好的。但现在的问题是：DIV [B]总是只有我所说的那个height。现在，也许有一个很酷的CSS技巧，它会一直向下触摸浏览器视口的底部？

来源

2010-10-18 Proud Member

只是一个想法，但你可以给'div'高度'100％'而不是像素大小吗？ – 2010-10-18 15:52:31

要设置高度动态是窗口的高度 - 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>

来源

2010-10-18 15:00:01 Brad

而不是每秒运行一次，也许可以在'document.ready'和'window.resize'上调用它？ – Huey 2014-08-31 12:04:23

@休伊，这是一个好主意。根据内容的不同，您可能还需要点击“窗口”。滚动“并控制'divB'上的溢出 – Brad 2014-08-31 20:47:40

我想DIV [A]是你的标题和DIV [B]你的主要内容div，并且你希望当你的内容div没有很多文字的时候，它总是让你的内容div被访问，对吗？

如果我没有记错，因为我当时可以测试它，你可以：

html, body 
{ 
height:100%; 
} 

DIV[B] 
{ 
height:100%; 
}

我认为应该做的伎俩。

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

来源

2010-10-18 14:59:59 ALOToverflow

只有在屏幕渲染时才考虑100％的高度。任何调整窗口大小都会导致您的布局不受欢迎。 – Brad 2010-10-18 15:00:53

所以你基本上说你应该继续调用一个javascript函数来调整视口的大小 – ALOToverflow 2010-10-18 15:06:32

是的，这是让div **总是**的唯一方法是剩余在窗口中的确切大小。 – Brad 2010-10-18 15:30:02

当你想DIV是一个位置是：绝对的，它应该是在position: relative容器。

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

所以，关于你的问题，DIV [B]，您可以<table> S和<div> S之间混合。

来源

2010-10-18 15:03:31 Arrabi

s和s之间的混合是什么意思？ – 2010-10-18 15:49:49

对不起，在表和divs之间 – Arrabi 2010-10-19 07:25:32

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

这个DIV会触摸视口的底部，你可以根据你的需要修改它的左右。我不确定这个答案是你想要的，但它可能是一个好开始

来源

2010-10-18 15:26:24 Mike

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

回答

相关问题