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%;
}CSS: 解决100% 高度失效 height 100% is not working when scrolling down page
原代码:
<!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> 相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16