我试图在身体上设置100%的高度,如果没有内容,它会起作用,但是内容不会填充页面.
<html>
<body>
test body
<div class="item"> asdasdasda sda sda sdas das d</div>
<div class="item"> asdasdasda sda sda sdas das d</div>
<div class="item"> asdasdasda sda sda sdas das d</div>
<div class="item"> asdasdasda sda sda sdas das d</div>
<div class="item"> asdasdasda sda sda sdas das d</div>
<div class="item"> asdasdasda sda sda sdas das d</div>
<div class="item"> asdasdasda sda sda sdas das d</div>
</body>
html {
background: red;
margin: 0px;
padding: 0px;
height: 100%;
}
body {
background: white;
max-width: 320px;
height: 100%;
margin: auto;
}
.item {
height: 150px;
}
我得到了MAD!
问题是身体保持页面的高度,无论内容是否溢出.如果内容不高于窗口,则
使用min-height它将是页面高度,但如果是,则将增长以适合内容:
body {
background: white;
max-width: 320px;
min-height: 100%;
margin: auto;
}