Question

我是新手，我想要一个与this图片完全相同的网页。但是，我也想让div的高度和宽度用百分比而不是px。

当我尝试时，盒子要么彼此叠加，要么甚至不会出现。因为我的逻辑工作如下。

例如：

包装position:absolute; height:100%; width:100%;（如果我用px制作，没问题，但是当我用百分比尝试时，通常我无法获得包装，为什么？）
标题position:relative（这意味着相对于包装？）height:10%; width:100%;
滑块position:relative; height:70%; width;100%; top:10%（为什么？因为标题使用了10％，因此它应该低于10％？） ...等等 ...
页脚position: relative; height:10%; width:100%; bottom:0;（它必须适合底部）

我希望我能清楚地说出我的问题。不久，任何人都可以通过我的例子帮助我进行绝对和相对定位吗？

 #wrapper{
	background-color:red;
	height:100%;
	width:100%;
	position: absolute;
		}
	
#header{
	background-color:yellow;
	height:20%;
	width:100%;
	position: relative;

	
	}
	
#slider{
	background-color:blue;
	position: relative;
	height:70%;
	width:100%;
	top:20%;
	
	}
	
#footer{
	background-color:yellow;
	position:relative;
	height:10%;
	width:100%;
	top:90%;
		
}

<html>
<head>
<title></title>
</head>

<body>
<div id="wrapper">
	<div id="header"></div>
	<div id="slider"></div>
	<div id="footer"></div>
</div>
</body>
</html>

Answer 1

这是你的标记的副本，更新的CSS有20％的标题，70％的滑块和10％的页脚。

内部div是position: relative因此，您不需要设置任何top，它们会自动堆叠在一起，并且不需要设置{ {1}}默认为全宽（100％）。

使用width时，与position: absolute一样，需要设置wrapper，left，top和width。< / p>

height

htmml, body {margin: 0; height: 100%; }

#wrapper{
  background-color:red;
  left: 0;
  top: 0;
  height:100%;
  width:100%;
  position: absolute;
  box-sizing: border-box;
}

#header{
  background-color:yellow;
  height:20%;
  position: relative;
  box-sizing: border-box;
}

#slider{
  background-color:blue;
  position: relative;
  height:70%;
  box-sizing: border-box;
}

#footer{
  background-color:yellow;
  position:relative;
  height:10%;
  box-sizing: border-box;
}

这是一种更现代的方式，使用<div id="wrapper"> <div id="header"></div> <div id="slider"></div> <div id="footer"></div> </div>

flex

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  flex: 0;
  flex-basis: 20%;
  background-color: yellow;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

main {
  flex: 1;
  flex-basis: 70%;
  background-color: blue;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

footer {
  flex: 0;
  flex-basis: 10%;
  background-color: yellow;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

使用百分比

1 个答案: