html - 用内容扩展正文

标签 html css css-position

我有一个关于相对定位的问题。我希望主体的背景颜色为蓝色。最初页面的高度应该是 100%(当然,这可能因计算机和笔记本电脑而异,因此我无法指定以像素为单位的固定高度),因此整个页面应该显示为蓝色。页面中间是一个元素,它已通过相对定位设置到该位置(它不能是绝对的,可以,以便随其内容扩展)。该元素可以垂直扩展。如果高度超出页面边界,页面也应该展开,展开部分的背景仍然是蓝色。

现在我该如何实现呢?我能想到的唯一解决方案是对背景元素使用相对定位(它是蓝色的并且在扩展时应该保持蓝色)。但为此,我必须将其设置为可用高度(相对定位的元素不能通过百分比值分配高度,因此排除了 height: 100%)。但高度本身会因浏览器、视口(viewport)大小等因素而异(而且我不能使用 Javascript!)。那么我该怎么做呢?

最佳答案

中间元素的高度是否已知?

您可能想看看这个 http://css-tricks.com/centering-in-the-unknown/

可能有帮助的现场演示 http://jsfiddle.net/thebabydino/7N4Xx/

JavaScript 只是为了改变中间的 div 的高度。

关于html - 用内容扩展正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11494807/

相关文章:

html - 在 flex 容器中时,如何防止 100% 宽度的图像扩展到主体大小?

css - 负上边距+溢出:hidden on Boostrap carousel

javascript - Bootstrap collapsible 第一次后不工作

html - 滚动时如何让文本与背景图像保持固定?

html - 调整大小时保持元素居中

javascript - 在绝对 div 位置自动扩展 textarea 无法正确收缩

javascript - 根据一天中的时间(使用多个图像)使用 JavaScript 更改 HTML 背景图像?

html - 如何避免表格 <td> 单元格中出现文字换行?

html - CSS:我不希望容器在彼此下方移动

javascript - 如何填充一个完整文档的 HTML 字符串的 iframe,而不是在 src 属性中为其提供指向另一个网页的链接?