Fatal编程技术网
  • css/
  • Css 固定容器中居中对齐的可滚动div

Css 固定容器中居中对齐的可滚动div

css html

Css 固定容器中居中对齐的可滚动div,css,html,css-position,Css,Html,Css Position,我正在努力将div中的div与position:fixed集中对齐（我需要将其固定，因为此UI将在现有页面的其余部分浮动）。中央div将包含大量内容，因此需要垂直滚动。它还需要使用maxwidth相对于视口水平缩放 这是我到目前为止所拥有的-它几乎就在那里-只是不知道如何集中黄色div 编辑我需要支持IE9，FF，Chrome，Safari如果可能的话 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/

我正在努力将
div
中的
div
与
position:fixed
集中对齐（我需要将其固定，因为此UI将在现有页面的其余部分浮动）。中央
div
将包含大量内容，因此需要垂直滚动。它还需要使用maxwidth相对于视口水平缩放

这是我到目前为止所拥有的-它几乎就在那里-只是不知道如何集中黄色
div

编辑我需要支持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>


试验
div{
填充：0px；
边际：0px；
}
#修理{
位置：固定；
左：0px；
右：0px；
顶部：0px；
底部：0px；
背景色：红色；
}
#我的包裹{
位置：相对位置；
保证金：1em自动；
背景颜色：绿色；
宽度：100%；
身高：100%；
}
#我的细节{
位置：绝对位置；
宽度：50%；
最大宽度：450像素；
顶部：20px；
背景颜色：黄色；
底部：0px；
溢出：滚动；
}
这里有很多内容
谢谢

最简单的方法是相对定位
#my details
元素，而不是绝对定位它。然后，只需使用
margin:0 auto
将元素居中即可。由于元素不再是绝对定位的，因此需要将其高度设置为
100%
。要替换
top:20px
，只需使用
calc（）
如下：
height:calc（100%-20px）

或者，您可以将
top:20px
更改为基于百分比的值，例如
2%
。然后，只需使用高度为
98%
，就可以避免使用
calc（）
。由于这可能不是最佳解决方案，您还可以使用以下方法：

基本上，此方法通过在父元素上添加一个
padding top
值来避免
top:20px
。然后，该元素的父元素接收一个
padding top
值
1em
，以替换
边距：1em auto

，这样行吗@JoshCrozier是的-谢谢-这在chrome中运行得很好-不幸的是，我需要支持IE9，Safari，所以使用css3 calc并不是一个真正的选项您可以将“我的包裹宽度”设置为100%。这意味着，它的宽度将取决于屏幕分辨率。在这种情况下，您可以使用jQuery获取#my_wrap的宽度，然后定位黄色div。但是您确定需要父级为100%吗？也许设置一个固定的宽度，将其居中，然后只使用CSS定位黄色的就足够了？@Lessugar谢谢-我不想使用jQuery来控制布局-我只是觉得这必须仅使用CSS才能实现。不过，我想我可以在旧浏览器中使用多边形填充来调整细节的高度 
#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;
}

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