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



我开始了我的web项目,试图遵循响应式设计规则。为此,我将所有维度表示为百分比。用div和图像填充我的起始页很好。我的css文件像一样启动

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

但当我的页面达到比视口稍大的高度时,它就会停止扩展,我添加的新内容也不会出现。我读到高度百分比是指容器的高度,你必须以像素为单位定义第一个父对象的高度,这样子对象才能获得他们的高度。我现在搜索了几天,阅读了关于"overflow:hidden"、"height:auto"的建议,顺便说一句,在我的情况下,使用bootstrap等不起作用,但主要问题仍然存在:对上面css的哪些修改提供了一个包装器,在添加新元素时可以自动按高度扩展,以遵循响应设计?提前感谢

两个选项:

  1. 移除100%高度。你其实并不需要它
  2. 添加overflow: scroll;:

    包装物{位置:相对;溢出:滚动;宽度:100%;高度:100%;}

编辑以添加:

  1. 将高度更改为OP注释中建议的最小高度

在代码中发生的事情是,您告诉#wrapperdiv要和屏幕一样高,不能更高。如果它和屏幕一样高,就没有什么可向下滚动的;你看到了整件事。从技术上讲,内容在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>

最新更新