html - 当窗口缩小时，CSS 使可用空间首先减少

Question

我这周刚刚开始学习 HTML/CSS，如果我在任何地方听起来很愚蠢，我深表歉意。不管怎样，这是我的问题:

我正在编写一个网站，其中所有内容都被边框包围。左边和右边的边距是 25%。现在，当我缩小浏览器时，所有内容始终保留在浏览器内的 25%。我希望网站首先用完左右 25% 的可用空间...如果我解释不当，我会举个例子。当你阅读PDF文件(http://www.kb.nl/sites/default/files/docs/pdf_guidelines.pdf打开试试)缩小窗口大小时，A4页面大小的 block (所有内容)不会缩小，直到左右的所有灰色空间都用完。我想把它放在我的网站上。以下是屏幕截图:

http://i.imgur.com/uhq035r.png <-- 全尺寸
SKkt4DK.png <-- 缩小的窗口

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

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

Answer 1

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

这样，当页面宽度缩小时，容器仍占据 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/

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