垂直居中的元素在其上方有最小的邊距/填充？

我在頁面上有一個垂直居中的幻燈片，但我想以某種方式添加一個「限制」，以便說出它在較小的屏幕上滑動頁面的高度。垂直居中的元素在其上方有最小的邊距/填充？

http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre

如果調整窗口的大小，將達到一個地步，幻燈片坐在在導航欄的頂部和主要標誌。基本上，一旦屏幕尺寸達到足夠小的尺寸，就需要停止在這些元素的基礎上。

這可能嗎？從.production-scroll類

來源

2012-08-24 Scully

用JavaScript/JQuery很容易 - 這是一個選項嗎？ – Marty

是的。任何解決方案都是一個很好的解 – Scully

當窗口變小時會發生什麼情況 - 幻燈片放映是否被切斷，或者頁腳是否在摺疊下方？ – zenkaty

刪除position: absolute;

另外從#sticky-footer除去position: fixed;如果沒有必要

來源

2012-08-24 06:31:21 Dipak

謝謝。不幸的是，它仍然需要居中，並刪除該行改變。 :) – Scully

固定頁腳也是必要的。客戶堅持不幸，脖子上這樣痛苦！ – Scully

@Tim你的頁腳太大，如果屏幕很小，它肯定會在橫幅上重疊。您需要在頁腳或橫幅之間做出決定。更重要的是什麼。還有另一種方法可以使頁腳變小:) – Dipak

我會分離網站的幻燈片放映部，和信頭部分。所以你有3個水平片：標題，幻燈片，頁腳。然後，您可以將幻燈片放在中間片段中間，並且永遠不會超過標題。

來源

2012-08-24 07:18:28 zenkaty

給這個小演示中，我已經爲你設置一個嘗試，看看你是否能在項目中切換了HTML類似的東西：

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Demo</title> 

      <!-- Insert below CSS here --> 
      <!-- Insert JQuery here (http://code.jquery.com/jquery-latest.min.js) --> 
      <!-- Insert below JS here --> 
    </head> 

    <body> 
     <div id="shell"> 
      <div id="head">Header.</div> 
      <div id="slideshow">Slideshow.</div> 
      <div id="foot">Footer.</div> 
     </div> 
    </body> 
</html>

CSS:（主要用於示範）：

*{ margin: 0; padding: 0; } 
div#head{ height: 200px; background: blue; } 
div#foot{ height: 100px; background: red; } 
div#slideshow{ height: 300px; background: green; }

JavaScript:

// Fix position initially and on each window resize. 
$(window).resize(fix); 
$(document).ready(fix); 

function fix() 
{ 
    // Work out position value. 
    var base = $("div#slideshow").position().top; 
    var middle = $(window).height()/2; 
    var hw = $("div#slideshow").height()/2; 

    // Position top either at the position determined above, or 0 if it bypasses the top of the page. 
    var destination = Math.max(middle - base - hw, 0); 
    $("div#shell").offset({ top: destination }); 
}

You can grab the full working example here。

來源

2012-08-24 07:39:17 Marty

垂直居中的元素在其上方有最小的邊距/填充？

回答

相關問題