垂直问题
来源：7-4 项目作业
rock221
2021-02-24 23:37:38
<!DOCTYPE html>
<html>
<head>
<title>定位-7-4作业</title>
<style type="text/css">
.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 class="div0">
<div class="div1">
<input type="text" name="i0" placeholder="请输入..." class="i1"><input type="button" name="b1" value="搜索" class="i2">
</div>
</div>
</body>
</html>
问题1：老师，我这样设置垂直是不是就准确了阿，还有其他方法吗
问题2：如果用fixed设置定位模式，如果是框架的图片或者其他元素的情况下并且内容过多产生滚动条，那么往下滚动，底部的内部不会动，就不太合适了吧。按常理滚动条应该随着内容变化而变化的，除非一些子元素作为提示信息 。
问题3：如果height不设置px高度，只设置百分比，那么背景颜色，填充不起来阿，如果想设置px的情况下，应该参考哪里比较准确呢？总不能随便设置个2000px或者更多吧。？
2回答
-
好帮手慕阿慧
2021-02-25
同学你好，老师这边运行同学代码是没有问题的，可以填充起来，如下：
不设置fixed时，没有填满，建议同学设置body的margin值为0px，再试试。如下：
祝学习愉快~
0 -
好帮手慕阿慧
2021-02-25
同学你好，
1、同学设置垂直是准确的。在body标签中使用一个div标签就可以了。同学可以设置body标签的背景颜色为pink，
参考代码如下：
2、同学的想法是可以的。在本次任务中页面要求是比较简单的，同学可以使用fixed。设置成什么定位模式要结合具体的页面情况来看。
3、同学说的height指的是哪个元素的height呢？填充不起来指的是哪里填充不起来呢？建议同学详细说明一下，方便老师回答。
祝学习愉快~
0hp>如果不设置fixed的话，设置100%填充的颜色，只能有子元素那么大，怎么可以填满呢？通过百分比，不设置fixed，还有就是如果用px，怎么判断用多少px可以填充满呢？
h021-02-25
相似问题