Question

您好我是Web开发的新手，并在Codecademy中使用Bootstrap学习CSS。

我在body中有3个组件，我想根据窗口大小设置height。

header {height:15%;}
main   {height:75%;}
footer {height:10%;}

我知道如何处理列而不是行。感谢。

Answer 1

如果父元素具有 - 且<html>和<body>元素具有 - 100%的已定义高度，那么您可以在CSS中使用相同的百分比：

＆＃13;

html, body {
  height: 100%;
}
.header {
  height: 15%;
  background-color: red;
}

.main {
  height: 75%;
  background-color: green;
}

.footer {
  height: 10%;
  background-color: blue;
}

＆＃13;

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

＆＃13;

当然，如果在任何这些元素上设置了任何填充或边距（即使默认情况下），这将导致垂直滚动;所以他们应该设置为0：

＆＃13;

html, body, div {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}
.header {
  height: 15%;
  background-color: red;
}

.main {
  height: 75%;
  background-color: green;
}

.footer {
  height: 10%;
  background-color: blue;
}

＆＃13;

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

＆＃13;

或者，您可以使用vh代替百分比单位; 1vh等于viewport-height的1%;这样可以避免在height: 100%和<html>元素上设置<body>：

＆＃13;

.header {
  height: 15vh;
  background-color: red;
}

.main {
  height: 75vh;
  background-color: green;
}

.footer {
  height: 10vh;
  background-color: blue;
}

＆＃13;

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

＆＃13;

但是，当然，由于padding和margin这仍会产生滚动条，因此仍然需要将其设置为0＆ndash - 仍然需要：

＆＃13;

html, body, div {
  margin: 0;
  padding: 0;
}

.header {
  height: 15vh;
  background-color: red;
}

.main {
  height: 75vh;
  background-color: green;
}

.footer {
  height: 10vh;
  background-color: blue;
}

＆＃13;

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

＆＃13;

或者，虽然margin仍然需要明确设置为0，但您可以通过设置{强制浏览器在元素的高度/宽度计算中包含任何padding {1}}至box-sizing。

这解决了通常计算元素的高度/宽度然后通过任何填充和任何边界增加的问题。 border-box强制浏览器设置元素的高度或宽度，包括边框和填充的大小：

＆＃13;

border-box

＆＃13;

html, body, div {
  margin: 0;
  box-sizing: border-box;
}

.header {
  height: 15vh;
  background-color: red;
}

.main {
  height: 75vh;
  background-color: green;
}

.footer {
  height: 10vh;
  background-color: blue;
}

＆＃13;

参考文献：

box-sizing ^{compatibility，specification}。
CSS Values and Units Module, Level 3。

Answer 2

我认为它错过了父母的height，body和html代码。

html, body {
  height: 100%;
  margin: 0;
}
header {
  height: 15%;
}
main {
  height: 75%;
}
footer {
  height: 10%;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

或者，您可以使用视口单元。

body {
  margin: 0;
}
header {
  height: 15vh;
}
main {
  height: 75vh;
}
footer {
  height: 10vh;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

Answer 3

您可以尝试这样：

body {
	width: 36%;
	margin: 8px auto;
}

div.wrapper {
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;

	background: red;
}

div.wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;

	color: white;
	font-size: 24px;
	text-align: center;
}

<div class="wrapper"><div>See in fullscreen mode</div></div>

根据窗口大小的行高比例变化

3 个答案: