Html 如何使页面的容器div高度始终保持不变，而不会出现内容溢出？

我正在尝试制作一个简单的网页，其中有一个以内容为中心的div。到目前为止，我过得相当轻松，但我遇到了一个障碍：当浏览器窗口比主要内容短时，内容会溢出，例如：

我看过很多教程/类似的问题，但似乎找不到一个完全符合我要求的：

保持容器居中大多数解决方案使用position:fixed，这通常使容器div与页面左侧对齐 使容器保持窗口的高度，即使在调整大小后也是如此 允许在窗口不够高时滚动溢出：隐藏通常会消除滚动条，因此只显示部分内容 这是我的密码：

css

html

---

这可能很棘手，并且有很多技术可能对您的特定情况有效，也可能无效

尝试：

---

听起来像是在模拟浏览器窗口？尝试将您的内容块边距居中：0 auto适用于大多数浏览器，并让浏览器处理滚动等。当我将其添加到mainContent样式时，它所做的只是将文本分散到容器div的边缘，它仍然会溢出。如果我将其添加到容器样式中，仍然会出现溢出错误；保证金：0自动；我恐怕从你的截图上看不出你想要的是什么-你有没有一个你想模仿的例子？我想在某种程度上，我想我是在试图模仿中间div中的所有东西滚动，但背景保持静止。但是，div是内容的高度。我想我的是浏览器窗口的高度，里面的内容会滚动。尝试修复背景图像：背景：url。。。固定0.100%；我认为thinkgeek就是这样做的，尽管他们在机器人/僵尸身上有一些棘手的透明度问题。我遇到的所有这些问题是溢出的使用：隐藏做它应该做的事情，但是，如果浏览器太短，隐藏溢出的所有文本会去除网页的大部分。你是否在寻找溢出：滚动？这很有帮助，我已经修改了CSS，使其主要基于此工作。我遇到的问题是溢出卷轴没有显示所有的内容，它会切断底部的段落。一般来说，尽量不要指定元素的高度；相反，让容器内的内容决定容器的高度。

#container {
        width: 900px;
        height: 100%;
        margin: auto auto auto auto;
        padding: 1px;
        background-image: url('img/light_toast.png');
    }
#mainHeader {
        margin: 30px 30px 10px; 
        padding: 0px;
    }
#mainContent{
        margin: 0px 80px 0px 80px; 
        padding: 1px;
    }    

<div id="container">
        <div id="mainHeader">
            <h1 id="msg" align="center" style="margin: 0 auto">Header Text</h1>
        </div>
        <div id="mainContent">
            <p id="par1"></p>
            <p id="par2"></p>
            <p id="par3"></p>
            <p id="par4"></p>
            <p id="par5"></p>
        </div>
    </div>