固定容器中居中對齊，可滾動的div

我正努力將div中的div與position:fixed集中對齊（我需要將它固定，因爲此UI將浮現在現有頁面的其餘部分上）。中央div將包含相當數量的內容，因此需要垂直滾動。它還需要以最大寬度相對於視口水平縮放。固定容器中居中對齊，可滾動的div

這是我到目前爲止 - 它幾乎在那裏 - 只是不能解決如何集中黃色div。

http://jsfiddle.net/p7F3u/

編輯我需要支持IE9，FF，Chrome瀏覽器，Safari瀏覽器如果可能的話

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Test</title> 
    <style> 
     div { 
      padding: 0px; 
      margin: 0px; 
     } 
     #fix { 
      position: fixed; 
      left: 0px; 
      right: 0px; 
      top: 0px; 
      bottom: 0px; 
      background-color: red; 
     } 
     #my-wrap { 
      position: relative; 
      margin: 1em auto; 
      background-color: green; 
      width: 100%; 
      height: 100%; 
     } 
     #my-details { 
      position: absolute; 
      width: 50%; 
      max-width: 450px; 
      top: 20px; 
      background-color: yellow; 
      bottom: 0px; 
      overflow: scroll; 
     } 
    </style> 
</head> 
<body> 
    <div id="fix"> 
     <div id="my-wrap"> 
      <div id="my-details"> 
       <p>Lots of content in here....</p> 
       <br style="clear: both" /> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

謝謝！

來源

2014-05-07 geedubb

會這樣嗎？ http://jsfiddle.net/j9b3b/ –

@JoshCrozier是的 - 謝謝 - 在鉻合金工作得很漂亮 - 不幸的是我需要支持IE9，Safari http://caniuse.com/#feat=calc所以使用css3鈣不是真的選項 – geedubb

您將#my_wrap寬度設置爲100％。這意味着，它的寬度取決於屏幕分辨率。在這種情況下，您可以使用jQuery獲取#my_wrap的寬度，然後定位黃色div。但是你確定你需要父母是100％嗎？也許這足以設置一個固定的寬度，居中，然後只用CSS定位黃色的那個？ – lesssugar

最簡單的方法是相對定位#my-details元素，而不是絕對定位它。然後，您可以簡單地使用margin:0 auto來將元素居中。由於元素不再被絕對定位，所以您需要給它一個高度爲100%。要取代top:20px，您可以簡單地使用calc()，如下所示：height: calc(100% - 20px)。

Exmaple Here

#my-details { 
    position:relative; 
    margin:0 auto; 
    height:calc(100% - 20px); 
    width: 50%; 
    max-width: 450px; 
    top: 20px; 
    background-color: yellow; 
    bottom: 0px; 
    overflow: scroll; 
}

作爲替代方案，你可以改變top:20px爲百分比值，如2%。然後，您可以簡單地使用98%的高度，並避免使用calc()。因爲這可能不是一個最佳的解決方案，還可以使用以下：

Example Here

#fix { 
    padding-top:1em; 
} 
#my-wrap { 
    padding-top:20px; 
}

基本上，這種方法由父元件上增加一個padding-top值，而不是避免top:20px。 的父親元素然後接收padding-top的值1em以置換margin: 1em auto。

來源

2014-05-07 20:57:07

很好的答案 - 感謝您的幫助@Josh – geedubb

固定容器中居中對齊，可滾動的div

回答

相關問題