css - 文本流过 div

Question

所以我有一个居中的 div，其中包含我的静态网站的内容。我使用此 CSS 将 div 锚定到页面底部

div#center_content {

position: absolute;
top:15px;
bottom: 0px;

left: 0;
right: 0;
margin-right: auto;
margin-left: auto;

width: 1000px;
background: #EEEEEE;
border-radius: 10px 10px 0 0;
/*
background-image: linear-gradient(to bottom, #FFFFFF 70%, #DADADA 99%);
*/
text-align: center;
}

HTML如下:

    <div id="center_content">
        <h1 id="page-heading">Heading</h1>
        <hr id="first-rule"></hr>
        <div id="nav-list">
        <ul>
            <li><a href="index.html">about</a> </li>
            <li><a href="work.html">work</a></li> 
        </ul>
        </div>
        <hr></hr>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam auctor quam sed ultrices. Quisque hendrerit pellentesque leo eu condimentum. Morbi lorem enim, condimentum sed sem ut, auctor tempor ante. Praesent pulvinar elementum lorem, sit amet lobortis sem facilisis nec. Donec ultricies eros at placerat vulputate. Vestibulum a hendrerit erat. Vivamus varius cursus ipsum, sit amet cursus arcu volutpat vel. Duis congue dui a ornare ornare. Duis aliquam dui arcu, non tincidunt tortor euismod id. Cras auctor velit vitae odio malesuada convallis. Mauris odio dolor, hendrerit dapibus fringilla eget, aliquet in lorem. Nunc faucibus tristique eleifend. Vestibulum tellus ligula, volutpat commodo sollicitudin nec, suscipit quis urna. Nunc varius fringilla commodo.

        Aenean nec nunc varius, consequat velit id, sodales lorem. Etiam luctus sapien id odio suscipit tincidunt. Donec nec dolor eget lacus ornare iaculis. In quis iaculis urna, eu pharetra odio. Nullam sit amet purus sit amet eros blandit viverra vel quis sapien. Suspendisse potenti. Donec vel aliquam quam. Curabitur tempor fermentum lectus at laoreet. Nullam vehicula metus ut lectus congue, eu euismod urna placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aliquam venenatis magna vitae risus ullamcorper, in egestas sem dapibus. Praesent tincidunt, ligula a eleifend facilisis, erat lectus molestie lorem, non volutpat arcu metus vel nunc. Nunc semper massa turpis. Ut et metus orci. Duis eu bibendum lorem.

        Phasellus id interdum metus. Suspendisse potenti. Cras vitae venenatis eros. Nam ac consequat dolor. Sed sed erat aliquam, lobortis est eu, adipiscing lorem. Aliquam imperdiet lacus id tristique tempor. Duis aliquet aliquam est quis ornare. Sed non pharetra velit. Etiam non enim tristique, luctus arcu rutrum, vulputate sem. Nullam posuere auctor ante vel vulputate. Nulla nec felis ut purus condimentum adipiscing sed sit amet urna. Vivamus vel fringilla odio. Morbi suscipit vel risus non suscipit. Nullam eget lectus ultrices odio euismod dictum. Curabitur libero nibh, interdum quis sem sed, sagittis gravida velit.

        Maecenas ultrices erat sit amet elit egestas blandit. Ut vitae hendrerit purus. Nullam hendrerit est commodo leo tempus rhoncus. Proin mauris libero, auctor vitae augue a, fringilla accumsan velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut lacus tellus. Suspendisse sed suscipit magna. Nulla fermentum, tortor vel mattis condimentum, dui eros interdum tortor, non dignissim neque urna id erat. Ut et ante ut eros consequat dapibus a interdum risus.
        </p>

    </div>

问题是，当有很多文本时(如本例所示)，文本会溢出带有灰色 div 的 div，当用户向下滚动时，文本会从灰色 div 溢出并溢出到背景上。换句话说，div 不适合内容。调整窗口大小时，div 会调整大小，但滚动时不会。滚动似乎打破了一切。

提前致谢!

编辑:这是一个 fiddle : http://jsfiddle.net/gm8T4/1/ (我将宽度更改为 500px 以便更容易看到问题。)

编辑 2:我真的很想避免使用 overflow属性，因为我不想摆脱浏览器滚动条，也不想给 div 滚动条。

Answer 1

CSS:

div#center_content {
    position: relative;
    top: 15px;
    min-height: calc(100% - 15px);
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    background: #EEEEEE;
    border-radius: 10px 10px 0 0;
    /*
background-image: linear-gradient(to bottom, #FFFFFF 70%, #DADADA 99%);
*/
    text-align: center;
}

我改变了位置和最小高度。

编辑: calc() 在一些当前的移动浏览器中存在支持问题: http://caniuse.com/#feat=calc并且 calc() 不适用于 chrome 中的视口(viewport)单元。