CSS make free space 在window收缩时先减少

Question

我这周刚开始 HTML/CSS，如果我听起来很蠢，我很抱歉。不管怎样，这是我的问题：

我正在编写一个网站，其中所有内容都被边框包围。左边和右边的边距是 25%。现在，当我缩小浏览器时，所有内容始终保留在浏览器内的 25%。我希望该网站首先用完左右两侧的 25% 免费 space ... 如果我解释不当，我会举个例子。当你阅读PDF文件（http://www.kb.nl/sites/default/files/docs/pdf_guidelines.pdf打开试试）缩小window大小时，A4页面大小的块（所有内容）不会缩小，直到全部变灰space左边和右边已经用完了。我想把它放在我的网站上。以下是屏幕截图：

http://i.imgur.com/uhq035r.png <-- 全尺寸
SKkt4DK.png <-- 已缩小 window

不能post超过2个链接，这就是为什么我只放图片ID的原因。是的，我怎样才能做到这一点？

编辑：我之前尝试过定位属性，但没有用。

Answer 1

您需要做的是将您的内容放在一个容器中。容器的宽度应为页面的 100%，并且您的内部内容的 left/right 边距设置为自动。

这样当页面宽度缩小时，容器仍然占据 100% 的宽度，但内部内容的边距会根据新变化进行调整。

HTML

<div id="container">
    <div id="content">

    </div>
</div>

CSS

    #container{
        width:100%;
        height:800px;
        background-color: gray;
    }
    #content{
        width:800px;
        height:100%;
        background-color: green;
        margin: 0 auto;
    }

演示： http://jsfiddle.net/zvo4u72x/

进行相应调整，但使用此示例代码应该可以证明您需要什么。

CSS make free space 在window收缩时先减少

CSS make free space decrease first when window is shrinked

html

css

window