Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
原代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
html, body{
padding: 0;
margin: 0;
}
.heightShower {
width:30%;
height: 100%;
color: #fff;
background-color: #e0f;
}
</style>
</head>
<body>
<div class="heightShower">
This is the element
</div>
</body>
</html>
解决方案是:
/* 100% height fix */
html, body{
height: 100%;
}
修改后代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
/* 100% height fix */
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.heightShower {
width:30%;
height: 100%;
color: #fff;
background-color: #e0f;
}
</style>
</head>
<body>
<div class="heightShower">
This is the element
</div>
</body>
</html>
如果页面存在滚动条的话, 可以用 min-height:100% 代替 height:100%
when it is a scrolling down page, Try using min-height:100% instead of height:100%.
结果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
/* 100% height fix */
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.heightShower {
width:30%;
/* 100% height fix for scrolling down page */
min-height: 100%;
color: #fff;
background-color: #e0f;
}
</style>
</head>
<body>
<div class="heightShower">
This is the element
</div>
</body>
</html>
原文/转自: CSS: 100% 高度失效 height 100% is not working
相关推荐
height: 100%; /* 根据需要设定高度 */ overflow: hidden; /* 隐藏超出容器的图片 */ } #scrolling-container img { position: absolute; width: 100%; /* 图片宽度填充容器 */ height: auto; /* 自动调整高度...
3. 使用CSS进行定位，如`position: absolute`和`width: 100%, height: 100%`，确保`<iframe>`充满`<div>`。 4. 考虑响应式设计和自适应内容，可能需要动态调整`<iframe>`的尺寸。 5. 处理跨域问题，确保CORS设置正确...
解决 `iframe` 中 `fixed` 失效的方法主要有以下几种： 1. **同源策略的解决**： - 如果可能，将 `iframe` 中的页面转移到与包含页面相同的域下，这样可以消除同源策略的限制。 - 使用 `postMessage` API 进行...
本篇文章将围绕提供的代码片段`<iframe src="show.asp" frameBorder="0" width="500" scrolling="no" height="230"></iframe>`展开详细讨论。 ### `<iframe>`标签概述 `<iframe>`（Inline Frame）是HTML中的一个...
在这个案例中，我们主要探讨如何仅使用CSS实现这样的效果，尽管标签中提到了JavaScript，但CSS是主要的实现工具。 首先，我们需要理解CSS（层叠样式表）的作用。CSS是用于定义网页样式的语言，它可以控制网页元素的...
这里的`class="scrolling-container"`是为了方便在CSS中对这个容器进行样式设置。 接下来是CSS，它是控制网页外观的关键。为了实现图片的左右滚动，我们需要创建一个水平滚动的布局。这可以通过设置`display: flex`...
<iframe id="conFrame" src="a.html" frameborder="0" scrolling="no" width="100%" height="500px" onload="setIFrameHeight('conFrame');"> ``` 这里，`id`属性为`"conFrame"`的`<iframe>`在加载完成后会调用`...
<iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="https://juejin.im/timeline"> </iframe> 此外，如果我们想让 iframe 在 iOS 设备上自适应宽度，可以使用以下...
在现代Web开发中，全屏滚动（Full-Screen Scrolling）是一种常见的网页设计模式，它为用户提供了沉浸式的浏览体验。这种设计通常用于展示产品、故事叙述或创意作品集。本教程将详细介绍如何使用JavaScript和CSS来...
**纯CSS滚动字幕(跑马灯)技术详解** 在网页设计中，滚动字幕（又称跑马灯）是一种常见的动态效果，它能够吸引用户的注意力并有效地传递信息。本篇文章将深入探讨如何仅使用CSS（层叠样式表）来创建这种效果，无需...
### iframe高度自适应技术详解 在网页开发过程中，经常会遇到需要在一个页面中嵌入另一个页面的需求，这通常通过HTML的`iframe`元素实现。然而，一个常见的问题是当嵌入的内容高度变化时，如何使`iframe`的高度能够...
- **direction**：指定滚动的方向，可选值有`left`、`right`、`up`和`down`。 - **scrollamount**：指定滚动的速度，值越大速度越快。 ### 二、使用CSS实现滚动效果 虽然`<marquee>`标签可以方便地实现滚动效果，...
《纯CSS3实现广告文字滚动效果的深度解析》 在当今网页设计领域，CSS3已经成为了不可或缺的一部分，它为开发者提供了丰富的样式控制和动画效果。本篇将详细讲解如何利用CSS3来创建一种常见的广告文字滚动效果，适用...
以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。 -webkit-overflow-...
《CSS Reset 样式重置的实现》 在网页设计中，CSS Reset（样式重置）是一项基础且至关重要的工作，其目的是消除不同浏览器之间的默认样式差异，确保跨平台、跨浏览器的一致性。默认情况下，每个浏览器都有自己的...
《CSS3文字上下滚动切换特效详解》 在网页设计中，动态效果的运用能极大地提升用户体验，其中文字滚动切换特效就是一个常见的元素。本篇文章将详细解析"css3文字上下滚动切换特效"，并探讨如何利用jQuery和CSS3实现...
然后通过CSS设置容器的高度仅显示一个条目的高度，并通过JavaScript控制定时改变容器的`top`属性，使内容向上或向下移动，达到滚动的效果。 ```html <div class="scrolling-container"> 条目1 条目2 条目3 <!--...
使用视窗单位（viewport width/height：`vw/vh`）代替像素单位，可以使得元素的大小基于视口的宽度或高度，这样在滚动时`fixed`元素的位置可以相对稳定。例如，`top: 50vh;`会将元素保持在屏幕中央。 3. **监听...