垂直问题

<!DOCTYPE html>

<html>

<head>

.div0{ /*框架设置*/

width: 100%;

height: 100%;

background-color: pink;

position: fixed;

margin:-8px;

box-sizing: border-box;

/* top: 0px;

left: 0px;*/

}

/**{

background-color: pink;

}*/

.i1{

width: 180px;

height: 30px;

text-indent: 0.5em;

border: 0.5px solid red;

outline: none;

background-color: pink;

box-sizing: border-box;

}

.div1{

width: 240px;

height: 30px;

text-align: center;

position: absolute;

top: 50%;

margin-top:-15px;

left: 50%;

margin-left: -120px;

}

.i2{

width: 40px;

height: 30px;

background-color: red;

color: white;

border-style: solid;

border-color: red;

font-size: 1px;

box-sizing: border-box;

}

</style>

</head>

<body>

</div>

</body>

</html>

问题1：老师，我这样设置垂直是不是就准确了阿，还有其他方法吗

问题2：如果用fixed设置定位模式，如果是框架的图片或者其他元素的情况下并且内容过多产生滚动条，那么往下滚动，底部的内部不会动，就不太合适了吧。按常理滚动条应该随着内容变化而变化的，除非一些子元素作为提示信息。

问题3：如果height不设置px高度，只设置百分比，那么背景颜色，填充不起来阿，如果想设置px的情况下，应该参考哪里比较准确呢？总不能随便设置个2000px或者更多吧。？

rock221 2021-02-24

源自：CSS定位 7-4 项目作业

收起

2回答

好帮手慕阿慧 2021-02-25 15:14:05

同学你好，老师这边运行同学代码是没有问题的，可以填充起来，如下：

不设置fixed时，没有填满，建议同学设置body的margin值为0px，再试试。如下：

祝学习愉快~

收起回答

好帮手慕阿慧 2021-02-25 11:12:48

同学你好，

1、同学设置垂直是准确的。在body标签中使用一个div标签就可以了。同学可以设置body标签的背景颜色为pink，

参考代码如下：

2、同学的想法是可以的。在本次任务中页面要求是比较简单的，同学可以使用fixed。设置成什么定位模式要结合具体的页面情况来看。

3、同学说的height指的是哪个元素的height呢？填充不起来指的是哪里填充不起来呢？建议同学详细说明一下，方便老师回答。

祝学习愉快~

收起回答

提问者 rock221 #1

.div0{ /*框架设置*/
width: 100%;
height: 100%;
background-color: pink;
position: fixed;
margin:-8px;
box-sizing: border-box;
/* top: 0px;
left: 0px;*/

}
问题3：如果height不设置px高度，只设置百分比，那么背景颜色，填充不起来阿，如果想设置px的情况下，应该参考哪里比较准确呢？总不能随便设置个2000px或者更多吧。？这个作为背景元素，只创建这一步，页面无显示，

2021-02-25 11:17:42
提问者 rock221 #2

如果不设置fixed的话，设置100%填充的颜色，只能有子元素那么大，怎么可以填满呢？通过百分比，不设置fixed，还有就是如果用px，怎么判断用多少px可以填充满呢？

2021-02-25 11:21:03