相关疑难解决方法(0)
将背景应用于<html>和/或<body>
http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景body,它会占用整个页面(无论实际的高度或宽度body是多少).
但是,如果应用CSS背景都html和body为背景body 不占用整个页面.
这种差异是否存在预期的行为？
如何叠加两个全屏背景(例如,背景颜色和半透明图像？)
推荐指数
解决办法
查看次数
next.js 中的 div 高度不是 100%
我在 next.js 中样式化页面时遇到问题。我想要全高页面。
因此，我在 body 和 html 标签中设置了 height 属性，没关系，我有 body 和 html 标签的全高（在开发工具中证明），但是虽然我将 #__next height 设置为 100%，但我无法实现全高它。如果我应用其他测量值，如 px 或 vh，它会受到影响。
布局文件
html {
height: 100%;
font-size: 16px;
}
body {
min-height: 100%;
font-family: @text-font-family;
direction: rtl !important;
text-align: start !important;
}
#__next {
height: 100%; // or min-height
}
推荐指数
解决办法
查看次数
当它的最小高度大小时,为什么不继承容器高度？
我正在尝试使容器填满整个页面(或视口,以较大者为准),但遇到了一些麻烦.我正在使用这篇文章中的建议:https://stackoverflow.com/a/17555766,设置<html>和<body>达到100%的高度.
但我注意到.Contentdiv只在<body>高度设置时才填充视口height: 100%,但不是min-height: 100%.这是为什么？为什么不设置它设置时.Content的高度？有没有解决这个问题(没有绝对定位或固定高度)？<body>min-height
HTML
<html>
<body>
<div class="Content">Content</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}
.Content {
background: red;
min-height: 100%;
}
codepen:http://codepen.io/anon/pen/mJEMVX
PS:当<body> …
推荐指数
解决办法
查看次数
HTML5保持图像的宽高比？
我刚注意到Chrome会调整此图片的大小,保持其宽高比:
<!DOCTYPE html>
<img style="width: 100%; height: 100%;" src="image.jpg">
当HTML5 doctype不存在时,图像会失真:
<img style="width: 100%; height: 100%;" src="image.jpg">
这仅在图像的容器是文档时有效,如果图像在div例如中则不起作用.
这个功能是什么,我能以某种方式将图像缩放到完整的窗口大小而不删除doctype吗？
推荐指数
解决办法
查看次数
页脚在底部有CSS网格吗？想不通吗？
我看过其他教程，了解如何在内容很少时使用 css 网格使页脚粘在底部。但我无法弄清楚。
如果你能帮忙，那就太好了。我正在学习 css grid，我花了几天时间断断续续地试图弄清楚它。
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100%;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation" …推荐指数
解决办法
查看次数
html和body元素的高度
我一直在Internet上查找以查找min-height和height属性如何在body和html元素上工作。我在很多地方都看过以下代码
html {
height: 100%;
}
body {
min-height: 100%;
}
上面的内容可以与其他div结合使用，以获取页脚粘滞。另一个声明是要设置主体的百分比高度，我们还需要设置一个显式的html高度。
好吧，但是html标记的相对高度是多少？一些答案说，如果视口的高度为100％，则它是相对于视口的。现在，这100％的相对高度是多少？
这篇文章说html元素的高度由视口HTML vsBody控制，但这不是我所看到的
HTML元素的高度可以增加
但是为什么会这样，当内容增加时，html元素的高度也会增加，就像在Chrome开发者工具上看到的那样
码：
html {
height: 100%;
}
body {
min-height: 100%;
}
html {
}
.wrapper {
padding-bottom: 3000px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
}
固定HTML元素的高度
只有当我将html元素的高度显式设置为100％时，它才会获得固定高度：
<html>
<head>
<title>Height</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>html {
height: 100%;
} …推荐指数
解决办法
查看次数
CSS规范中"传播到视口"的含义是什么？
CSS规范中有一些章节提到"传播到视口"; 例如:计算高度.
当"溢出"不计算为"可见"但已传播到视口时,此部分也适用于正常流中的块级非替换元素.
什么样的属性可以传播？它是否与子元素从其父元素继承属性的规则相矛盾？
推荐指数
解决办法
查看次数
身体在100%,最小高度为100%,但内容延伸到浏览器屏幕
我知道我已经看到了这个问题的解决方案,但我找不到它的生命.
我已经将html和body元素扩展到了dom的100%.它们的最小高度为100%.问题是当我的内容超出浏览器屏幕的底部时,正文将不会随之扩展:
<!DOCTYPE html>
<html>
<head>
<title>Damn you body, extend!!</title>
<style type="text/css">
html,body{
height :100%;
min-height :100%;
}
html{
background-color:gray;
}
body{
width :90%;
margin :auto;
background-color :white;
}
body > div{
background-color :red;
height :50px;
width :80px;
margin :auto;
text-align :center;
}
</style>
</head>
<body>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem <br />testItem</div>
<div>testitem …推荐指数
解决办法
查看次数