HTML代码:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<div class="sheet" style="width:80%;max-width:1024px;height:400px;"></div>
</body>
</html>
CSS代码:
html,
body {
min-height: 100%;
margin: 0;
padding: 0
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.sheet {
background-color: red
}
我期望看到的是一个漂浮在屏幕中间的红色矩形,但我得到的是位于顶部中间的矩形.
它从未在FF中工作,它在添加DOCTYPE标签之前在chrome中工作,但之后它也不再适用于chrome.
当我使用height而不是min-height但我不想将高度值固定到屏幕大小时,工作是什么,因为当容器长到足以滚动时,我可能需要它.
将min-height属性设置为100vh(视口高度).然后,您身体的最小高度将是视口的100%.
| 归档时间： |
|
| 查看次数： |
5910 次 |
| 最近记录： |