是否可以让div达到屏幕的高度，然后在那之后溢出？
这是我尝试过的不起作用的内容：
<!doctype html>
<head>
<style>
html, body {
height:100%;
min-height:100vh;
}
#content div {
overflow:auto;
}
</style>
</head>
<body>
<div id="content" />
</body>
</html>
如果其中的内容长于屏幕高度，我希望能够在“内容” div中滚动。
答案 0 :(得分：3)
在div选择器之后删除#content选择器。您正在div内的任何#content上设置CSS规则。
我仅出于演示目的将#content div的高度设置为130％。您应该删除它并让您的内容填充div。另外，您可以在div上将min-height设置为100％。
请参见下面的代码：
<!doctype html>
<head>
<style>
html, body {
height:100%;
min-height:100vh;
}
#content {
width: 100%;
height: 130%;
background: red;
overflow:auto;
}
</style>
</head>
<body>
<div id="content" />
</body>
</html>
更新
根据评论中的要求，我创建了另一个示例，其中内容是可滚动的。请参见下面的代码，或点击此JS Bin链接：https://jsbin.com/holovuriba/edit?html,output
我使用带有div和id #content-wrapper的包装器flexbox来实现这一目标。
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
min-height: 100vh;
width: 100%;
margin: 0;
}
body {
border: 3px solid black;
background: yellow;
position: fixed;
}
#content-wrapper {
display: flex;
height: 100%;
width: 80%;
margin: 0 auto;
flex-direction: column;
flex-wrap: nowrap;
position: relative;
border: 3px solid black;
overflow-y: scroll;
}
#content {
width: 100%;
background: red;
}<!doctype html>
<head>
</head>
<body>
<div id="content-wrapper">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nisi ac orci commodo porttitor eu nec orci. Quisque eget mauris in nisl consectetur vulputate. Suspendisse tortor arcu, ullamcorper sed dignissim vehicula, iaculis vel lacus. Pellentesque
non ligula nec diam tristique rhoncus. Quisque fermentum mi nec pretium ullamcorper. Nulla nisi lectus, volutpat in justo in, tincidunt mollis velit. Proin pulvinar ante dui, sit amet auctor purus aliquam ac. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Quisque lobortis placerat feugiat. Ut in felis tempor, euismod quam vitae, porttitor odio. Maecenas sodales nulla ut tellus pellentesque, eu hendrerit neque pellentesque. Suspendisse scelerisque
mattis quam ultrices bibendum. Pellentesque in nunc faucibus, placerat nisi vel, vestibulum ipsum. Aenean porta dictum sapien ac bibendum. Integer nec ipsum a ex lobortis condimentum. Vivamus venenatis, orci in viverra convallis, lorem diam ultrices
nunc, ac mattis nisi dui a dolor. Aenean porta tortor sit amet lectus consectetur bibendum. Pellentesque porttitor nunc eu velit efficitur lobortis. Duis congue dictum arcu in egestas. In dignissim eros quam, et sodales risus hendrerit id. Maecenas
sit amet ante ipsum. Suspendisse ultricies ultricies quam, nec imperdiet nibh commodo eget. Aenean ac posuere nisl, nec luctus nisl. Etiam et ipsum lorem. Ut venenatis sem vestibulum ornare faucibus. Ut ullamcorper orci velit, eget malesuada ex
lacinia non. Aliquam id iaculis dolor, quis aliquet mauris. Sed elementum ut quam sit amet bibendum. Sed consectetur, arcu vel dapibus volutpat, lacus augue iaculis urna, non porttitor tellus lectus sit amet lectus. Etiam sagittis sed ligula non
luctus. Nunc ac urna nisl. Cras porttitor velit purus, eget varius risus aliquam quis. Vestibulum congue nibh eu lacus convallis, eget lobortis urna sagittis. Quisque accumsan bibendum tellus, id accumsan quam. Aliquam elementum sit amet tortor
vel porttitor. Suspendisse nunc mi, elementum vitae mattis sed, elementum ac orci. Sed pharetra orci id elit lacinia, ut laoreet ex ornare. In eget rutrum sem. Morbi sollicitudin diam quis mi facilisis pharetra. Sed lobortis leo ac mattis semper.
Donec varius dolor quis mauris imperdiet pulvinar. Nam cursus magna ut lectus porttitor, et vehicula nunc efficitur. Mauris et aliquet mauris, et sagittis urna. Ut commodo risus quam, id fringilla urna laoreet ullamcorper. Pellentesque at tellus
metus. Aenean arcu tellus, hendrerit ut sollicitudin quis, imperdiet nec neque. Pellentesque sollicitudin justo lectus, pretium ultricies ligula euismod vel. Nulla quis aliquam lectus, in interdum nulla. Nulla interdum nunc ac felis venenatis,
vehicula rutrum lectus sodales. Aliquam mollis massa lacus, sed eleifend velit viverra luctus. Morbi cursus fringilla faucibus. Nunc nec sapien tempus, iaculis erat pharetra, rutrum tellus. Curabitur sit amet eros at libero congue accumsan. Suspendisse
et arcu a eros interdum laoreet eu vitae justo. Integer feugiat tellus sit amet elit consequat sollicitudin eget id risus. Quisque diam purus, laoreet ut neque quis, bibendum lacinia ligula. Proin dignissim sit amet massa eget imperdiet. Etiam
pellentesque, tellus quis venenatis vehicula, leo lacus placerat nisi, id ultrices sem risus vitae lacus. Nulla quis augue luctus, aliquam lacus vitae, sodales diam. Donec ut lacus urna. Nulla tempus libero ut risus ultrices lacinia ac eget ipsum.
Vivamus laoreet ligula augue, in iaculis sem luctus nec. In pharetra metus vel euismod fringilla. Donec facilisis vulputate velit, eget commodo sapien ornare et. Phasellus sed dictum nulla, ut scelerisque metus. Curabitur iaculis, urna ac dictum
dapibus, ex neque maximus enim, vel placerat justo diam convallis sem. Proin elementum vestibulum augue, quis pretium ipsum vulputate in. Cras augue sapien, eleifend at est nec, rutrum cursus libero. Phasellus at bibendum justo. Maecenas porta
lectus at rutrum fermentum. Cras vel ipsum vel diam ultrices dapibus vel in augue. Nullam posuere lobortis ipsum, eu viverra urna pharetra id. Vestibulum accumsan placerat nibh a bibendum. Aenean vitae aliquet lorem. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Cras nisl nunc, vehicula sit amet leo vitae, faucibus congue lectus. Nam mi lacus, aliquam sed commodo in, pretium quis erat. Maecenas eget condimentum metus, vitae aliquam libero.
Aliquam justo dui, luctus pharetra justo sed, ullamcorper fringilla lacus. Integer luctus egestas ipsum, sed tempus est tristique non. Donec a diam id nibh vulputate cursus. Vestibulum suscipit orci eu nisl pretium, quis varius lectus pulvinar.
Nunc elementum imperdiet ligula, non auctor velit euismod at. Praesent fermentum lorem at mi consectetur dignissim. Etiam eget magna est. Praesent eu ultricies arcu. Ut enim libero, dictum consequat magna non, lacinia fringilla sem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra, enim in pulvinar ultricies, tellus sem lobortis felis, non varius magna velit non est. Nulla pretium tortor mattis tortor vehicula, a ullamcorper nibh
iaculis. Sed vitae elementum felis. Aenean convallis lacus tellus, sed ullamcorper diam varius eget. Curabitur malesuada augue vel imperdiet malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vestibulum rutrum enim,
vitae rhoncus magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque suscipit suscipit sem, in malesuada felis fermentum ac. Sed ut urna ut nulla mollis consectetur porttitor id risus. Nam ultricies sem id dui egestas, non
sollicitudin ante fermentum. Proin nec ligula sed sapien maximus convallis. Praesent fringilla nunc non purus pretium venenatis. Proin sagittis lectus risus, a consectetur tellus vulputate ac. Pellentesque pellentesque nunc eu augue tempor vulputate.
Phasellus aliquet ipsum viverra purus volutpat tempor. Sed id lacus in felis rutrum aliquet. Duis viverra vel nibh nec sodales. Vestibulum elementum, urna id mollis hendrerit, eros eros ullamcorper mauris, ut volutpat nulla lacus viverra erat.
Sed et lobortis ligula. Nullam massa odio, porttitor eget elementum id, laoreet non ante. Nunc eleifend id augue in laoreet. Vestibulum posuere magna orci, quis imperdiet dui semper in. Vivamus egestas dapibus risus, eu convallis felis. Aliquam
finibus rhoncus rutrum. Curabitur vehicula consectetur ipsum vitae convallis. Mauris posuere tortor ut nisi rhoncus, nec hendrerit ligula ultricies. Aliquam bibendum, tortor id consectetur pulvinar, leo metus consequat elit, eu consequat nisl
neque sed lacus. Sed venenatis urna at facilisis consectetur. Praesent rutrum lobortis elit, quis vestibulum purus porta a. Phasellus ac est vitae lorem tincidunt condimentum. Nulla facilisi. Mauris ac blandit turpis. Ut iaculis nisl non arcu
mollis, at auctor odio consequat. Vivamus rhoncus tellus non libero vehicula tristique. Nam non enim vel risus laoreet egestas. Suspendisse ut dolor id purus tristique porttitor. Etiam ornare pretium consequat. Donec mattis odio a ligula venenatis
condimentum. Nulla eleifend nisl in tellus euismod tempus. Nullam sit amet est hendrerit, sodales est vel, consequat augue. Nam velit sem, placerat et massa vel, volutpat rhoncus nulla. Ut in aliquam libero. Aenean tristique orci sed nulla venenatis
gravida. Nam consectetur laoreet velit, quis rutrum enim consequat non. Vivamus laoreet dapibus iaculis. Cras maximus velit tempus ante aliquet ultricies. Maecenas vestibulum magna ipsum. Vestibulum ac pharetra ipsum. Sed scelerisque elementum
diam, in vestibulum lectus tincidunt sit amet. Suspendisse luctus semper nulla et tincidunt. Sed vel condimentum arcu. Integer quis ipsum vulputate, volutpat diam quis, hendrerit odio. Fusce erat tellus, luctus a rutrum ac, facilisis sed velit.
Nulla non sagittis arcu. Cras ac congue urna. Morbi semper ex nec urna imperdiet, in tempor nisl commodo. In varius est sed est venenatis iaculis. Etiam in neque ante. Aliquam hendrerit dolor eleifend urna faucibus, sed tincidunt ipsum facilisis.
Phasellus ante lorem, commodo a sapien id, finibus facilisis nulla. Suspendisse tristique consequat ante eu fermentum. Sed euismod lorem eu tortor lacinia, eget facilisis turpis vulputate. Aenean commodo ante vitae ipsum dapibus, ut malesuada
elit lobortis. Integer id mauris enim. Curabitur ligula urna, aliquam in volutpat non, malesuada sed elit. Phasellus orci mi, fringilla in consectetur vel, fringilla id massa. Aenean dapibus pellentesque purus id euismod. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Nulla eget posuere ipsum. Fusce venenatis arcu at sapien elementum, id vestibulum magna mattis. Nullam ut metus orci. Curabitur enim odio, faucibus sed augue et, placerat placerat leo. Etiam
pharetra enim eu lacinia finibus. Duis ultrices, augue at hendrerit eleifend, ligula massa placerat ante, quis euismod mauris urna eu eros. Pellentesque in elit eleifend, varius felis et, volutpat augue. Nullam mollis felis nunc, sed sollicitudin
lacus ultrices iaculis. Aenean suscipit, dolor nec dapibus congue, quam augue aliquet augue, eget congue dui sapien at mauris. Duis placerat, dolor eu mollis tempus, nibh tellus ultrices velit, at sollicitudin elit velit nec justo. Donec ornare
fermentum massa eget fermentum. Integer ex dolor, mattis in erat non, sollicitudin euismod ipsum. Maecenas et sapien in risus malesuada sodales id a est. Cras suscipit mollis mi, a pretium elit pharetra efficitur. Morbi interdum sapien ac volutpat
gravida. Aenean dictum bibendum vestibulum. Maecenas vitae justo risus. In hac habitasse platea dictumst. Nullam vel metus sed augue consectetur eleifend. Quisque eget tincidunt quam, at posuere augue. Nulla ullamcorper convallis tellus ut dignissim.
Etiam eleifend quam sit amet lobortis facilisis. Vivamus ligula ante, sagittis nec nisi suscipit, sagittis scelerisque justo. Maecenas eu tempor turpis. Proin accumsan suscipit arcu et vehicula. Integer convallis, neque suscipit rhoncus tempor,
augue lectus iaculis odio, scelerisque tincidunt nibh orci id felis. Ut justo arcu, lacinia vel risus ac, feugiat finibus est. Sed magna risus, interdum non metus at, imperdiet eleifend elit. Sed vestibulum, tortor nec faucibus congue, mi tortor
vehicula nisl, pellentesque suscipit tortor libero a sem. Quisque consequat vitae orci id gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere nec odio quis ultrices. Nunc ullamcorper consequat tortor, non tincidunt mauris
aliquam scelerisque. Proin a erat eget felis luctus mollis. Nunc a tempus urna. Aliquam mollis ex felis, ac ornare diam lacinia id. Pellentesque pellentesque, mi quis efficitur porta, nunc velit pretium velit, sit amet vulputate nisl est ut dui.
Aenean auctor dictum orci, et euismod ipsum molestie vitae. Suspendisse eget est interdum, bibendum nunc condimentum, cursus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis ligula
nec sapien facilisis scelerisque in vel velit. Praesent vel pretium tortor. Sed et auctor magna. Nullam in leo id augue tincidunt varius. Integer eu nisi non magna sollicitudin porttitor. Suspendisse pulvinar diam sed ipsum interdum lobortis id
ut metus. Suspendisse potenti. Sed id erat non erat vestibulum tristique. Nulla eget leo maximus ligula consectetur vehicula non eget nulla. Aenean tristique tortor nec metus imperdiet lobortis. Nam lacinia vel sem et sollicitudin. Donec et sagittis
urna. Pellentesque ac erat at felis rhoncus euismod. Mauris imperdiet vel nunc non rhoncus. Pellentesque a enim purus. Aliquam erat volutpat. Praesent fermentum vel justo ac bibendum. Integer vehicula mi eget malesuada aliquet. Nunc ut nulla aliquam,
accumsan ante eget, venenatis eros. Phasellus eleifend, sem eget malesuada convallis, ligula nulla fermentum neque, semper gravida massa lectus ac elit. Sed semper lorem lectus, non condimentum sapien semper vel. Curabitur ut neque eros. Fusce
porta ultrices dolor in facilisis. Sed vulputate vestibulum pretium. Etiam auctor metus sed lacus mollis, ultricies tristique lacus rutrum. Duis sodales accumsan consequat. Sed id aliquet erat. Fusce eget tincidunt sapien. Suspendisse in tincidunt
felis, sit amet porta magna. Aliquam rhoncus convallis vulputate. Nunc imperdiet, enim eget maximus hendrerit, mi neque venenatis lorem, vitae elementum eros arcu quis lorem. Quisque accumsan dignissim posuere. Duis tincidunt ex quis libero malesuada
laoreet. Sed gravida dignissim justo, a euismod quam. Cras ut purus vitae mi lacinia posuere at sit amet tortor. In vitae urna ultrices, cursus neque ac, tincidunt mauris. In ac imperdiet magna. Etiam vestibulum risus sed vehicula pellentesque.
Suspendisse sed elit risus. Sed leo nulla, consectetur eu felis eu, condimentum sagittis sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse egestas ipsum arcu, sit amet ornare sapien
luctus nec. Pellentesque laoreet mollis sem eu feugiat. Morbi ultricies leo in arcu consectetur faucibus. Cras bibendum felis non ullamcorper ultricies. Suspendisse quis elit sed turpis rutrum malesuada sed eget lacus. Aliquam blandit consectetur
lacus non pellentesque. Vestibulum elementum massa eget dignissim aliquam. Pellentesque sodales eros id libero congue condimentum. Aenean mauris justo, pellentesque vel tristique nec, ornare luctus orci. Phasellus eleifend eros sapien, ac cursus
lectus faucibus eget. Cras eu venenatis urna. Praesent molestie varius ullamcorper. Ut tristique eros sem, non mattis ex tempor id. Nam varius consectetur turpis, eget elementum felis lobortis eu. Aliquam egestas mauris nec quam malesuada luctus.
Nam nec scelerisque nisl, ut malesuada urna. Nullam non sem in ipsum viverra gravida. Mauris vulputate felis at iaculis vestibulum. Aliquam aliquet felis libero, ut euismod sapien tincidunt at. Fusce semper, dui mattis mattis accumsan, tellus
velit sodales orci, sed tristique nunc eros rutrum justo. Ut porttitor, sapien eget laoreet bibendum, nunc sapien convallis tortor, ac feugiat odio nisi id leo.
</p>
</div>
</div>
</body>
</html>