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

Question

我正在努力將div中的div與position:fixed集中對齊（我需要對其進行修復，因為此UI會浮動在現有頁面的其余部分上）。 中央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>

謝謝！

Answer 1

最簡單的方法是相對#my-details元素進行相對定位，而不是絕對定位。 然后，您可以簡單地使用margin:0 auto將元素居中。 由於元素不再絕對定位，因此需要將其高度設置為100% 。 要替換top:20px ，您可以像這樣簡單地使用calc() ： height: calc(100% - 20px) 。

在這里舉例

#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() 。 由於這可能不是最佳解決方案，因此您還可以使用以下方法：

這里的例子

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

基本上，此方法通過在父元素上添加padding-top值來避免top:20px 。 然后，該元素的父級將收到1em的padding-top值以替換margin: 1em auto 。

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

問題描述

1 個解決方案

解決方案1
1 已采納 2014-05-07 20:57:07

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

問題描述

1 個解決方案

解決方案1 1 已采納 2014-05-07 20:57:07

解決方案1
1 已采納 2014-05-07 20:57:07