如何強制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向下延伸至屏幕底部？

回答

相關問題