Question

我试图拥有一个包含三个部分的网页，他们应该始终填写他们所处的任何显示的高度，而不是调整大小。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<body bgcolor="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
      font-size: 1em; 
}

.white {
    background-color: white;
	height: 10%;
	width: 100%;
} 

.orange {
    background-color: orange;
	height: 45%;
	width: 100%;
} 

.green {
    background-color: green;
	height: 45%;
	width: 100%;
} 
</style>

<div class="white">
<img class="welcome" src="" width="5%" height="5%" alt="Welcome">
</div>

<div class="orange">
<p>Welcome!</p>
<a href="" style="text-decoration: none">
    <img class="launch" src="" width="5%" height="5%" alt="Logo1">
</div>

<div class="green">
<a href="" style="text-decoration: none">
    <img class="launch" src="" width="5%" height="5%" alt="Logo2">
</div>

＆＃13;

这是我的代码，它适用于填充窗口的整个高度并使用可用空间，直到图像被添加到代码中。

它们应该是固定大小，内容应该只在该DIV范围内。我错过了另一段高度代码吗？

图像也应在各自的DIV容器内水平和垂直居中。

Answer 1

如果您确实需要设置高度和宽度限制，无论其内容如何，请将特定max-height和max-width并将其height和宽度设置为100% 。我建议你创建一个通用类（我创建了一个名为card的类）并将所有常量放在那里。

我在课程card上使用了Flexbox来确保内容非常适合。
我在图像上设置了max-height和max-width以使它们保持一致。这样做的一个缺点是，如果你使用的图像大小不同于你的最大高度和最大宽度（就像我在下面的代码片段中所做的那样），它们会被扭曲，缩放等等。

<div class="card white">
<img class="welcome" src="http://www.catster.com/wp-content/uploads/2017/06/small-kitten-meowing.jpg" alt="Welcome">
</div>

<div class="card orange">
<p>Welcome!</p>
<a href="" style="text-decoration: none">
    <img class="launch" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?" alt="Logo1">
</div>

<div class="card green">
<a href="" style="text-decoration: none">
    <img class="launch" src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="Logo2">
</div>

<style>

html, body {
  height: 100%;
  margin: 0;
}

.card {
  max-height: 300px;
  max-width: 600px;
  height: 100%;
  width: 100%;
  border: 2px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height:100%;
  width: 100%;
  max-height: 200px;
  max-width: 200px;
}

.white {
  background-color: white;
} 

.orange {
  background-color: orange;
} 

.green {
  background-color: green;
}
</style>

希望这有帮助。

Answer 2

height: 5%实际上意味着5％的父元素 - 是你想要的吗？如果您希望高度为窗口的5％，则可以使用height: 5vh（=视口高度的5％）。

对于居中，您可以将display: flex和其他属性（请参阅下面的代码段）添加到三个元素中（但是，这也会影响第二个DIV中的一个段落）

并注意一些其他设置：第二个元素中的图像包装int p标记不在一行中，上面有p等。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-size: 1em;
}

.white,
.orange,
.green {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.white {
  background-color: white;
  height: 10%;
  width: 100%;
}

.orange {
  background-color: orange;
  height: 45%;
  width: 100%;
}

.green {
  background-color: green;
  height: 45%;
  width: 100%;
}

img {
  width: 5vh;
  height: 5vh;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body bgcolor="#ffffff">
  <div class="white">
    <img class="welcome" src="http://placehold.it/300x200/ddd" alt="Welcome">
  </div>

  <div class="orange">
    <p>Welcome!</p>
    <p>
      <a href="#" style="text-decoration: none">
        <img class="launch" src="http://placehold.it/300x200/ddd" alt="Logo1"></a>
    </p>
  </div>

  <div class="green">
    <a href="#" style="text-decoration: none">
      <img class="launch" src="http://placehold.it/300x200/ddd" alt="Logo2"></a>
  </div>

阻止DIV容器在其中添加内容时丢失其大小

2 个答案: