html - 根据屏幕大小调整 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

我认为这与具有 position: fixed 的 side-bar-container 类有关。我将其更新为 position: absolute。

另请记住，当您执行 margin: 10% 时，您将向 media-body div 的左侧和右侧添加 10% 的边距(共计宽度的 20%)。所以我也将 media-body div 的宽度更改为“width: 80%”。

原始 fiddle :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%;
}

更新 fiddle :http://jsfiddle.net/ytwwffab/4/