responsive-design - 仅响应式内容 div

Question

好吧，很简单，我的布局由两个元素组成，导航（“左”）和实际站点内容（“右”）。

现在我想要的是“左” div 保持原样，但是当屏幕缩小到一定尺寸时，我希望内容 div 的宽度随之减小。

但是，我不知道如何开始。当我查找响应式网页设计时，我只能找到具有大量 div 和百分比的整个布局的骨架，但我只想要一个 div，我完全糊涂了。

这就是我现在所拥有的：

.right {
    width: 750px;
    margin: 40px 0 40px 50px;
    float: left;
    position: relative;
}

.left {
    margin: 40px 0px 40px 40px;
    width: 210px;
    float: left;
    position: relative;
}

Answer 1

希望这个http://jsbin.com/uquzaw/1/不会太过分。

本质上，您需要 CSS 中的百分比和 html 中的元标记来获得您正在寻找的效果。

Answer 2

您所要求的并不是完全响应式设计。如果我理解正确，您将需要百分比宽度。

HTML：

<div id="left">
    <a href="#">Nav1</a> <br>
    <a href="#">Nav2</a> <br>
    <a href="#">Nav3</a> <br>
    <a href="#">Nav4</a> <br>
</div>

<div id="right">
    This is where the main content will go.
</div>

CSS：

body { margin: 0; padding: 0; }

#left {
    width: 20%;
    height: 100%;
    background: red;
    float: left;
    text-align: center;
}

#right {
    width: 80%;
    height: 100%;
    background: blue;
    float: left;
    text-align: center;
}