根据屏幕大小调整div框

Question

当向外滚动时，div会随之滚动，而不是调整到导航栏宽度。这是它显示的错误：

http://sc-cdn.scaleengine.net/i/1aa795a251b9ac3296e29ec216e636b5.png（图片）

CSS：

#media-body {
    position:relative;
    float:left;
    border:1px solid;
    width: 90%;
    margin: 10%;
}

.media {
    position:relative;
    float:left;
    width: 30%;
    border: 1px solid;
}

.media-box {
    position:relative;
    float:left;
    width: 30%;
    border: 1px solid;
}

HTML：

<div id="side-bar">
    <div class="side-bar-container">
        <div id="media-body">
            <div class="media">         
                media box           
            </div>
            <div class="media-box">
                yo, another box
            </div>
        </div>
    </div>
</div>

它与百分比和位置属性有关吗？

jFiddle

Answer 1

我认为这与side-bar-container班级position: fixed有关。我更新了它的位置：绝对的。

另请注意，当您执行margin: 10%时，您需要在media-body div的左侧和右侧添加10％的边距（总宽度的20％）。所以我也将你的media-body div的宽度改为`width：80％＆＃39;。

原始小提琴：http://jsfiddle.net/ytwwffab/2/

修改

我做了以下更改：

.side-bar-container {
    margin-top: 60px;
    position: relative;
}

#media-body {
    position: absolute;
    float: left;
    border: 1px solid;
    left: 10%;
    right: 10%;
}

更新了小提琴：http://jsfiddle.net/ytwwffab/4/