我开始了我的网络元素，试图遵循响应式设计规则。为此，我将所有维度表示为百分比。用 div 和图像填充我的起始页很好。我的 css 文件开头是这样的
body, html {
height:100%;
width:100%;
}
#wrapper{
position:relative;
width:100%;
height:100%;
}
但是当我的页面达到比 viewport 稍大的高度时，它不再扩展并且我的新添加内容也没有显示。我读到高度百分比指的是容器高度，你必须以像素为单位定义第一个 parent 的高度，这样 child 才能得到他们的高度。我现在搜索了几天，阅读了有关“溢出:隐藏”，“高度:自动”的建议，顺便说一句，这在我的情况下不起作用，使用 Bootstrap 等等，但主要问题仍然存在:对上述内容进行了哪些修改css 提供了一个包装器，可以在以遵循响应式设计的方式添加新元素时自动按高度扩展？ 提前致谢
最佳答案
两种选择:
- 移除 100% 高度。你真的不需要它。
添加
溢出:滚动；:包装器{ 职位:相对； 溢出:滚动； 宽度:100%； 高度:100%；
编辑添加:
- 按照 OP 评论中的建议将高度更改为最小高度。
您的代码中发生的事情是您告诉#wrapper div 与屏幕一样高，而不是更高。如果它和屏幕一样高，就没有什么可以向下滚动的；你看到了整个事情。从技术上讲，内容在 div 本身下方继续(溢出)，但它在屏幕外。通过将溢出设置为滚动，告诉浏览器不要让它溢出，而是滚动。看这里:https://www.w3schools.com/cssref/pr_pos_overflow.asp
不过，最终我可能会完全不考虑高度，除非我有非常具体的理由将其包括在内。
body, html {
width: 100%;
height:100%;
}
#wrapper{
color: black;
background-color: yellow;
position:relative;
width:100%;
}
编辑添加:我认为您必须给我们一些示例代码，因为您提供给我们的信息显然不是我们需要的全部。您使用的是什么浏览器？
这很好用:
body, html {
width: 100%;
height:100%;
}
#wrapper{
color: black;
background-color: yellow;
position:relative;
width:100%;
}<html>
<body>
<div id="wrapper">
<h1>Hello There</h1>
<p>Lorem ipsum something sumthing fnord. Adipiscing at invidunt et eos ut te exerci possim eirmod vel ipsum lorem kasd. Veniam labore labore vero sit nulla lorem et rebum et voluptua duis clita sit. Tempor enim lorem placerat erat feugiat et ut tempor. Sit delenit gubergren qui vero eirmod tempor facilisis. Sadipscing imperdiet aliquam dolor vero. Nulla aliquyam et dolore sit aliquam vel stet. Amet rebum lobortis amet. Lorem diam eirmod ipsum. Augue dolores sadipscing rebum eos dolor praesent. Takimata justo labore. Voluptua dolore sit luptatum invidunt justo justo diam clita lobortis dolor labore. Te soluta eos dolor sit lorem nostrud accusam luptatum euismod dolore sit. Ipsum veniam imperdiet dolor laoreet consetetur voluptua diam iusto elitr consetetur duo. Est justo elitr facilisis gubergren dolore tincidunt stet dolore et clita tempor sanctus ea. Dolores eum dolore clita erat accusam et eos clita at. Sea sea esse tempor ullamcorper lorem. Sit dolore dolor erat tempor qui elitr gubergren dolor sit. Sea soluta illum sed ipsum zzril erat gubergren.</p>
<p>Et molestie quis aliquyam sanctus magna takimata lorem et consetetur sadipscing et. Gubergren et dolor tempor ullamcorper eos accusam et justo. Tincidunt dolor velit amet aliquyam sanctus takimata sea duis accusam sed ea et diam et option aliquyam et magna.</p>
<p>Accusam consetetur sed suscipit amet sit vero in duis clita amet. Et invidunt erat enim invidunt erat lorem duo ut euismod clita. Facilisis illum ut velit sanctus sadipscing diam dolore sadipscing veniam accusam. Kasd lorem sit esse. Invidunt dolor elitr duis ipsum sit sed ipsum dolore justo. No diam sed tincidunt dolore ex aliquyam. Sadipscing lorem adipiscing qui quod dolor lorem lorem veniam accusam et et. Te et amet in. Et vero illum dolores lorem at vero option takimata. Accusam eum eros nonumy at lorem iriure feugait dolor labore duis amet ipsum. Kasd consectetuer kasd diam gubergren autem takimata diam sit dolore praesent et consetetur id erat tation consetetur sadipscing.</p>
</div>
</body>
</html>关于html - 调整包装器 CSS 以遵循响应式设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46813001/