所以我有一个居中的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 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会调整大小，但滚动时不会调整大小。滚动似乎打破了一切。
提前致谢！
编辑：这是一个小提琴：http://jsfiddle.net/gm8T4/1/（我将宽度更改为500px，以便更容易看到问题。）
编辑2：我真的想避免使用属性，因为我不想删除浏览器滚动条，我不想给div滚动条。
答案 0 :(得分：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中的视口单元。
答案 1 :(得分：0)
如果你只想滚动div中的文本而不是整个页面，这就是你的div所需要的：
overflow-y:scroll;
这会从页面中删除滚动条，但会为div添加垂直滚动条。使用
overflow: scroll;
允许水平滚动。这两种解决方案都适用于所有主流浏览器。
答案 2 :(得分：0)
要保持页面边框处的滚动条，您还可以将div添加为正文子项：
<div id="topbar"></div>
div#topbar { position: fixed; z-index:1; top:0; width:100%; height: 15px; background-color:white;}
并将position:relative;和top:0设置为div#center_content。
答案 3 :(得分：0)
添加
overflow: auto;
到div#center_content样式。
div#center_content {
overflow:auto;
position: absolute;
top:15px;
bottom: 0px;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
width: 500px;
background: #EEEEEE;
border-radius: 10px 10px 0 0;
font-size: 24px;
text-align: center;
}
答案 4 :(得分：0)
这是一个解决方案，它使用Ryan Fait的sticky footer将您的内容div扩展到页面底部（隐藏粘性页脚）。
<div class="wrapper">
<div id="center_content">
<h1 id="page-heading">Heading</h1>
<hr id="first-rule"></hr>
<div id="nav-list">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">work</a></li>
</ul>
</div>
<hr></hr>
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div class="push"></div>
</div>
<div class="footer">Boo</div>
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
/* Custom styling */
background: #EEEEEE;
border-radius: 10px 10px 0 0;
width: 500px;
}
/* Hidden sticky footer */
.footer, .push {
height: 4em;
display: none;
}
div#center_content {
margin-top:15px;
font-size: 24px;
text-align: center;
}