1

我正在尝试固定 100%，但周围有一个小框架。我只是无法正确处理，框架会出现在顶部/底部或左侧/右侧，但不会从两侧出现......

这是我到目前为止所得到的：

div.all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    padding:15px;
}
div.wrap1{
    width:100%;
    height:100%;
    background-color:#00AEEF;
}

在此处输入图像描述

编辑：1 好吧，这就是我到目前为止所做的：

http://jsfiddle.net/Hm7Mw/

div.all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    overflow:auto;
}
div.wrap1{
    display: block;
    position:absolute;
    height:auto;
    width:100%;
    min-width:962px;
    bottom:6px;
    top:6px;
    left:0px;
    right:0px;
}   
div.wrap2{
    margin:0px auto;
    max-width:960px;
    height:100%;
    position:relative;
    overflow:visible;
}   
div.wrap3{
    overflow:hidden;
    height:auto;
    min-height:100%;
    width:100%;
    position:absolute;
    background-color: #FFF;
}

同样，它与滚动完美配合 - 即。我已经让它滚动整个东西，而不是包裹里面的东西。

但是，如果我向下滚动，底部的填充会由于某种原因消失。如果我将溢出自动放到内部容器中，那么它会有点“修复”它，但它们会在屏幕中间有非常难看的滚动条——这是我不想要的。

HTML：

<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">

       (BLA)      

</div>
</div>
</div>
</div>
</div>
4

4 回答 4

1

你需要这样的东西：

.onTopOfAll {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
    /* Something else for style */
}

.onTopOfTop {
    bottom: 15px;
    left: 15px;
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 2;
    /* Something else for style */
}
于 2012-06-03T07:00:17.540 回答
1 
 <div class="all_reviews">

    <div class="wrap1">
        <div class="wrap2">
            <div class="wrap3">
                    /8Content/8
        </div>
    </div>
    </div>
</div>

    all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    display:none;
}
div.wrap1{
    display: block;
    position:absolute;
    height:auto;
    width:100%;
    bottom:25px;
    top:5px;
    left:-10px;
    right:0px;
}   
div.wrap2{
    margin:0px auto;
    width:100%;
    max-width:940px;
    min-height:100%;
    position:relative;
}   
div.wrap3{
    overflow:auto;
    height:100%;
    width:100%;
    position:absolute;
    background-color: #FFF;
    border:5px solid #CCC;

    padding:5px;
}

注意撤消 display : none 使用脚本，并使用 overflow:hidden 固定正文，因此它不会在背景上沿途滚动。

于 2012-06-11T18:36:57.457 回答
0

尝试 div.all 的 auto 的高度和宽度，而不是 100%。您可能需要为您的身体增加 100% 的高度。

于 2012-06-03T07:11:33.510 回答
0

您的填充在您的 div 中添加了一些额外的宽度。你给了你 div 100% 的宽度，当你应用填充时，总宽度现在是 15px + 100% + 15px。如果您也可以提供您的 html 以及有关您将要做什么的一些想法，那么这将对我们其他人帮助您有所帮助。谢谢。

于 2012-06-03T08:01:23.777 回答