Question

我开始尝试遵循响应式设计规则的Web项目。为此，我将所有维度表示为百分比。用div和图像填充我的起始页面很好。我的css文件就像

一样

body, html {
height:100%;
width:100%;
}
#wrapper{
    position:relative;
    width:100%;
    height:100%;
}

但是当我的页面达到比视口大一点的高度时，它再次停止扩展，我的新添加内容也不会显示出来。我读到高度百分比指的是容器高度，你必须定义第一个父亲的高度（以像素为单位），这样孩子才能达到他们的高度。我现在搜索了几天，阅读有关＆＃34; overflow：hidden＆＃34; ，＆＃34;身高：汽车＆＃34;顺便说一句，在我的情况下，使用bootstrap等工作但是主要问题仍然存在：对上面的css的哪些修改提供了一个包装器，当按照以下方式添加新元素时，它可以通过高度自动扩展响应式设计？提前致谢

Answer 1

两个选项：

移除100％的高度。你真的不需要它。
添加overflow: scroll;：

包装{ 位置：相对; 溢出：滚动; 宽度：100％; 高度：100％; }

编辑添加：

根据对OP的评论中的建议将高度更改为最小高度。

你的代码中发生的事情是你告诉#wrapper div和屏幕一样高，而且不高。如果它和屏幕一样高，则无需向下滚动;你看到了整件事。从技术上讲，内容在div本身下方继续（溢出），但它在屏幕外。通过设置overflow to scroll，告诉浏览器不要让它溢出，而是滚动。见这里：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%;
}

编辑添加：我认为您必须提供一些示例代码，因为您明确提供给我们的信息并非我们需要的一切。您使用的浏览器是什么？

这很好用：

＆＃13;

body, html {
  width: 100%;
  height:100%;
}
#wrapper{
    color: black;
    background-color: yellow;
    position:relative;
    width:100%;
}

＆＃13;

<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>

＆＃13;

调整包装器css以遵循响应式设计

1 个答案: