Question

我有一个70％高度的标题，每个5个div表示页面中的不同部分。 <header>元素获取高度属性并按预期工作，但是当将高度设置为任何百分比值时，div元素将不会。

我环顾四周，显然我需要设置根元素高度，我做了高度：100％的html和body，一切都按预期工作;但是现在响应的标题不是。标题中的任何内容都会溢出并从容器中溢出。

/* === GLOBAL === */
* {
	box-sizing: border-box;
}

body {
	font-family: "Lato", sans-serif;

	height: 100%; /* EXPERIMENTAL */
}

/* === HEADER === */
header {
	height: 70%;

	background-color: #bdc3c7;
}

header h1 { /* The Heading "Saad Al-Sabbagh" */
	margin: 0;

	font-family: "PT Sans Narrow";
	text-align: center;
	padding-top: 2em;
}

header p a { /* The Link Inside The Description Paragraph */
	text-decoration: none;
	color: #3498db;
}

header p a:hover { /* The Link Inside The Description Paragraphs Hover Effect */
	color: #d35400;
	border-bottom: 3px solid #d35400;
}

header p { /* The Description Paragraph */
	text-align: center;
	font-size: 3rem;
	padding-top: .3em;
	font-weight: 700;
}

header ul { /* The Social Links List */
	list-style: none;
	text-align: center;
}

header ul li { /* The Social Links List Items */
	display: inline-block;
	font-size: 5em;
	padding: 1em .5em;
}

header ul li a { /* The Social Links */
	text-decoration: none;
	color: black;
}

header ul li a:hover { /* The Social Links On Hover */
	color: #d35400;
}

/* === ABOUT === */
#about {
	height: 100;
}

<!DOCTYPE html>
<html>

	<head>
		<!-- Meta -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Title -->
		<title>Saad Al-Sabbagh | Web Developer</title>

		<!-- CSS -->
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/main.css">
	</head>

	<body>

		<!-- Header -->
		<header>
			<h1>Saad Al-Sabbagh</h1>
			<p>Front End Web Developer, <br>Educator and Author <br>@ <a href="#">SitePoint</a></p>
			<ul>
				<li><a href="#" class="fa fa-facebook"></a></li>
				<li><a href="#" class="fa fa-twitter"></a></li>
				<li><a href="#" class="fa fa-linkedin"></a></li>
			</ul>
		</header>

		<!-- About -->
		<div id="about">

		</div>

		<!-- Expertise -->
		<div id="expertise">

		</div>

		<!-- Recent Works -->
		<div id="recent-works">

		</div>

		<!-- Latest Blog Post -->
		<div id="latest-blog-post">

		</div>

		<!-- Contact -->
		<div id="contact">

		</div>

		<!-- Footer -->
		<footer>

		</footer>

	</body>

</html>

Answer 1

示例中有一些问题：

当div为空时，它的高度为0。
div会包装其内容，而不是'膨胀'以适应其父级的高度。
高度必须有单位，因此#about { height: 100; }无效

我已经纠正了＃1和＃3，但不明白你想要达到的目标是什么。

/* === GLOBAL === */

* {
  box-sizing: border-box;
}
body {
  font-family: "Lato", sans-serif;
  height: 100%;
  /* EXPERIMENTAL */
}
/* === HEADER === */

header {
  height: 70%;
  background-color: #bdc3c7;
}
header h1 {
  /* The Heading "Saad Al-Sabbagh" */
  margin: 0;
  font-family: "PT Sans Narrow";
  text-align: center;
  padding-top: 2em;
}
header p a {
  /* The Link Inside The Description Paragraph */
  text-decoration: none;
  color: #3498db;
}
header p a:hover {
  /* The Link Inside The Description Paragraphs Hover Effect */
  color: #d35400;
  border-bottom: 3px solid #d35400;
}
header p {
  /* The Description Paragraph */
  text-align: center;
  font-size: 3rem;
  padding-top: .3em;
  font-weight: 700;
}
header ul {
  /* The Social Links List */
  list-style: none;
  text-align: center;
}
header ul li {
  /* The Social Links List Items */
  display: inline-block;
  font-size: 5em;
  padding: 1em .5em;
}
header ul li a {
  /* The Social Links */
  text-decoration: none;
  color: black;
}
header ul li a:hover {
  /* The Social Links On Hover */
  color: #d35400;
}
/* === ABOUT === */

#about {
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Meta -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Title -->
  <title>Saad Al-Sabbagh | Web Developer</title>
  <!-- CSS -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900|PT+Sans+Narrow">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!-- Header -->
  <header>
    <h1>Saad Al-Sabbagh</h1>
    <p>Front End Web Developer,
      <br>Educator and Author
      <br>@ <a href="#">SitePoint</a>
    </p>
    <ul>
      <li>
        <a href="#" class="fa fa-facebook"></a>
      </li>
      <li>
        <a href="#" class="fa fa-twitter"></a>
      </li>
      <li>
        <a href="#" class="fa fa-linkedin"></a>
      </li>
    </ul>
  </header>
  <!-- About -->
  <div id="about">
    About
  </div>
  <!-- Expertise -->
  <div id="expertise">
    Expertise
  </div>
  <!-- Recent Works -->
  <div id="recent-works">
    Recent Works
  </div>
  <!-- Latest Blog Post -->
  <div id="latest-blog-post">
    Latest Blog Post
  </div>
  <!-- Contact -->
  <div id="contact">
    Contact
  </div>
  <!-- Footer -->
  <footer>
    Footer
  </footer>
</body>
</html>

内容溢出<header>，高度未在<div>上设置

1 个答案: