html - 根据内容调整 HTML 页面的长度

标签 html css

我正在设计一个网站并且对它还很陌生。所以我的问题可能很幼稚。有两个页面 index.htmlaboutUs.html

例如,对于我的问题,我删除了大部分无效内容。我的问题与我们如何根据内容动态更改或处理页面长度有关。在我的例子中,index.html 没有太多的文字,所以 UI 看起来不错,但是 aboutUS.html 的内容太多,而且内容重叠 与页脚。 我该如何处理这种情况?作为引用,我在下面添加了一些图片,第一张图片没有重叠,但第二张有。您可以在 GitHub 找到源代码。 ( https://github.com/vnmshenoy/global )

图片

No overlap

With overlap

最佳答案

您的问题类似乎是 imageDiv 和重叠。 这两个都有定义的高度。

当元素内的内容大于此高度时,它是可见的,但实际上溢出了该位置,因此出现在下一个元素的顶部。如果您在这些元素上设置边框,您就会明白我的意思。

你总是可以在这里使用 overflow:scroll 样式,当这种情况发生时,滚动条就会出现,但你最好让你的设计在高度方面更加流畅,特别是如果你打算让它响应。

关于html - 根据内容调整 HTML 页面的长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33391423/

相关文章:

css - 如何使用 mat-chips/angular material2 的 ngFor 使 div 中的 flexbox 具有 2 列?

css - 有没有办法在 Angular2 组件内的 ng-content 中使用 css?

html - 将图像拉伸(stretch)到浏览器的边缘并根据浏览器的大小自动调整大小

html - 如何在两个不同表格的同一行上应用悬停?

javascript - 如何在输入标签中嵌入 SVG 图像图标?

javascript - 当我的页面加载速度过快时,如何测试我的加载屏幕?

css - 输入类型 ="image"在 Chrome 中显示不需要的边框,在 IE7 中显示断开的链接

html - CSS中position属性的使用

jquery - 如何模糊背景图像的 "repeated"部分?

html - 图像内的响应式 div 按钮