FlexBox容器不灵活高度

时间：2016-11-09 12:48:43

标签： html css flexbox containers

我正在处理我的投资组合，我遇到了一个问题，即about部分内的文本没有动态增加容器的高度。每当用户调整大小时。

这是我的代码。

＆＃13;
＆＃13; 
/* === GLOBAL === */

* {
  box-sizing: border-box;
}
body {
  display: flex;
}
a {
  text-decoration: none;
  color: black;
}
/* === SIDEBAR === */

#sidebar {
  height: 100vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #27ae60;
}
#sidebar > a {
  display: none;
  /* Hiding The Anchor Element (The Logo) On Desktops */
}
#sidebar h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Oswald";
  font-size: 3.2rem;
  margin-bottom: 0;
  margin-top: 0;
}
#sidebar p {
  text-align: center;
  margin-top: .40em;
  font-size: 1.3em;
  margin-bottom: 0;
  font-weight: 700;
}
#sidebar p a {
  color: #8e44ad;
}
#sidebar p a:hover {
  color: #e67e22;
}
#sidebar > ul {
  list-style: none;
  text-align: center;
  font-size: 1.8em;
  margin-top: .5em;
}
#sidebar > ul li {
  display: inline-block;
  padding: .5em;
}
#sidebar > ul li a:hover {
  color: #e67e22;
}
#sidebar nav {
  margin-top: 3em;
}
#sidebar nav ul {
  list-style: none;
  text-align: center;
  font-size: 1.6rem;
  margin: 0;
  padding: 1em;
}
#sidebar nav ul li {
  padding: .5em;
}
#sidebar nav ul li a::after {
  content: " ";
  display: block;
  margin: auto;
  width: 0;
  height: 3px;
  background-color: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sidebar nav ul li a:hover::after {
  width: 100%;
  background-color: black;
}
/* === CONTENT === */

#content {
  height: 100vh;
  width: 70vw;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
#about {
  height: 100%;
  width: 100%;
  background-color: #E0E4CC;
  display: flex;
  flex-direction: column;
}
#about h2 {
  text-align: center;
  margin-bottom: 0;
  font-family: "Oswald";
  text-transform: uppercase;
  font-size: 2.5rem;
}
#about p {
  align-self: center;
  padding: 2em 8em;
  line-height: 1.8;
  font-size: 1.2rem;
  font-family: "Average";
}
#expertise {
  height: 50%;
  width: 100%;
  background-color: #7BB0A6;
}
#recent-works {
  height: 50%;
  width: 100%;
  background-color: #523D1F;
}
#contact {
  height: 50%;
  width: 100%;
  background-color: #FF6766;
}
footer {
  height: 20%;
  width: 100%;
  background-color: red;
}
＆＃13; 
<!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="https://fonts.googleapis.com/css?family=Average|Oswald:300,400,700">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <!-- Sidebar Wrapper -->
  <div id="sidebar">
    <a href="#">S</a>

    <h1>Saad Al-Sabbagh</h1>
    <p>Front-End Developer
      <br>and Author @ <a href="#">SitePoint</a>
    </p>

    <ul>
      <li>
        <a href="#" class="fa fa-twitter"></a>
      </li>
      <li>
        <a href="#" class="fa fa-linkedin"></a>
      </li>
      <li>
        <a href="#" class="fa fa-telegram"></a>
      </li>
    </ul>

    <nav>
      <ul>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#expertise">Expertise</a>
        </li>
        <li><a href="#recent-works">Recent Works</a>
        </li>
        <li><a href="#contact-us">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Wrapper -->
  <div id="content">

    <!-- About -->
    <section id="about">
      <h2>About</h2>

      <p>Hi, I'm Saad (Sa'ad), a front-end developer from Kirkuk (Northern Iraq). I'm also an avid problem solver, blogger and UX designer I write about design on SitePoint, and about everything else on my Blog!
        <br>
        <br>I am a firm believer in self-learning and that everything can be learned through hard work, and this generally helps me increase my knolwedge on various topics and add new stuff into my repertoire everyday.
        <br>
        <br>I'm currently available for hire or take on freelance work. Feel free to browse through my expertise, recent works, and do not hesitate to contact me!</p>
    </section>

    <!-- Expertise -->
    <section id="expertise">

    </section>

    <!-- Recent Works -->
    <section id="recent-works">

    </section>

    <!-- Contact -->
    <section id="contact">

    </section>

    <!-- Footer -->
    <footer>

    </footer>

  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

在flex: 0 0 0

上使用#about

像：

#about {
  background-color: #e0e4cc;
  display: flex;
  flex: 0 0 0;
  flex-direction: column;
  height: 100%;
  width: 100%;

}

＆＃13;
＆＃13; 
/* === GLOBAL === */
* {
	box-sizing: border-box;
}

body {
	display: flex;
}

a {
	text-decoration: none;
	color: black;
}

/* === SIDEBAR === */
#sidebar {
	height: 100vh;
	width: 30vw;

	display: flex;
	flex-direction: column;
	justify-content: center;

	background-color: #27ae60;
}

#sidebar > a {
	display: none; /* Hiding The Anchor Element (The Logo) On Desktops */
}

#sidebar h1 {
	text-align: center;
	text-transform: uppercase;
	font-family: "Oswald";
	font-size: 3.2rem;
	margin-bottom: 0;
	margin-top: 0;
}

#sidebar p {
	text-align: center;
	margin-top: .40em;
	font-size: 1.3em;
	margin-bottom: 0;
	font-weight: 700;
}

#sidebar p a {
	color: #8e44ad;
}

#sidebar p a:hover {
	color: #e67e22;
}

#sidebar > ul {
	list-style: none;
	text-align: center;
	font-size: 1.8em;
	margin-top: .5em;
}

#sidebar > ul li {
	display: inline-block;
	padding: .5em;
}

#sidebar > ul li a:hover {
	color: #e67e22;
}

#sidebar nav {
	margin-top: 3em;
}

#sidebar nav ul {
	list-style: none;
	text-align: center;
	font-size: 1.6rem;
	margin: 0;
	padding: 1em;
}

#sidebar nav ul li {
	padding: .5em;
}

#sidebar nav ul li a::after {
	content: " ";
	display: block;
	margin: auto;
	width: 0;
	height: 3px;
	background-color: transparent;
	transition: width .5s ease, background-color .5s ease;
}

#sidebar nav ul li a:hover::after {
	width: 100%;
	background-color: black;
}

/* === CONTENT === */
#content {
	height: 100vh;
	width: 70vw;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

#about {
  background-color: #e0e4cc;
  display: flex;
  flex: 0 0 0;
  flex-direction: column;
  height: 100%;
  width: 100%;
   }

#about h2 {
	text-align: center;
	margin-bottom: 0;
	font-family: "Oswald";
	text-transform: uppercase;
	font-size: 2.5rem;
}

#about p {
	align-self: center;
	padding: 2em 8em;
	line-height: 1.8;
	font-size: 1.2rem;
	font-family: "Average";
}

#expertise {
	height: 50%;
	width: 100%;
	background-color: #7BB0A6;
}

#recent-works {
	height: 50%;
	width: 100%;
	background-color: #523D1F;
}

#contact {
	height: 50%;
	width: 100%;
	background-color: #FF6766;
}

footer {
	height: 20%;
	width: 100%;
	background-color: red;
}
＆＃13; 
<!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="https://fonts.googleapis.com/css?family=Average|Oswald:300,400,700">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/main.css">
	</head>

	<body>

		<!-- Sidebar Wrapper -->
		<div id="sidebar">
			<a href="#">S</a>

			<h1>Saad Al-Sabbagh</h1>
			<p>Front-End Developer <br>and Author @ <a href="#">SitePoint</a></p>

			<ul>
				<li><a href="#" class="fa fa-twitter"></a></li>
				<li><a href="#" class="fa fa-linkedin"></a></li>
				<li><a href="#" class="fa fa-telegram"></a></li>
			</ul>

			<nav>
				<ul>
					<li><a href="#about">About</a></li>
					<li><a href="#expertise">Expertise</a></li>
					<li><a href="#recent-works">Recent Works</a></li>
					<li><a href="#contact-us">Contact</a></li>
				</ul>
			</nav>
		</div>

		<!-- Content Wrapper -->
		<div id="content">

			<!-- About -->
			<section id="about">
				<h2>About</h2>

				<p>Hi, I'm Saad (Sa'ad), a front-end developer from Kirkuk (Northern Iraq). I'm also an avid problem solver, blogger and UX designer I write about design on SitePoint, and about everything else on my Blog! <br><br>

				I am a firm believer in self-learning and that everything can be learned through hard work, and this generally helps me increase my knolwedge on various topics and add new stuff into my repertoire everyday. <br><br>

				I'm currently available for hire or take on freelance work. Feel free to browse through my expertise, recent works, and do not hesitate to contact me!</p>
			</section>

			<!-- Expertise -->
			<section id="expertise">

			</section>

			<!-- Recent Works -->
			<section id="recent-works">

			</section>

			<!-- Contact -->
			<section id="contact">

			</section>

			<!-- Footer -->
			<footer>

			</footer>

		</div>

	</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果您使用display:flex属性，通常不必明确设置div的宽度和高度，在您的情况下为div #content。所以只需从此div中删除height: 100vh即可。 

/* === GLOBAL === */

* {
  box-sizing: border-box;
}
body {
  display: flex;
}
a {
  text-decoration: none;
  color: black;
}
/* === SIDEBAR === */

#sidebar {
  height: 100vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #27ae60;
}
#sidebar > a {
  display: none;
  /* Hiding The Anchor Element (The Logo) On Desktops */
}
#sidebar h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Oswald";
  font-size: 3.2rem;
  margin-bottom: 0;
  margin-top: 0;
}
#sidebar p {
  text-align: center;
  margin-top: .40em;
  font-size: 1.3em;
  margin-bottom: 0;
  font-weight: 700;
}
#sidebar p a {
  color: #8e44ad;
}
#sidebar p a:hover {
  color: #e67e22;
}
#sidebar > ul {
  list-style: none;
  text-align: center;
  font-size: 1.8em;
  margin-top: .5em;
}
#sidebar > ul li {
  display: inline-block;
  padding: .5em;
}
#sidebar > ul li a:hover {
  color: #e67e22;
}
#sidebar nav {
  margin-top: 3em;
}
#sidebar nav ul {
  list-style: none;
  text-align: center;
  font-size: 1.6rem;
  margin: 0;
  padding: 1em;
}
#sidebar nav ul li {
  padding: .5em;
}
#sidebar nav ul li a::after {
  content: " ";
  display: block;
  margin: auto;
  width: 0;
  height: 3px;
  background-color: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sidebar nav ul li a:hover::after {
  width: 100%;
  background-color: black;
}
/* === CONTENT === */

#content {
  width: 70vw;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
#about {
  height: 100%;
  width: 100%;
  background-color: #E0E4CC;
  display: flex;
  flex-direction: column;
}
#about h2 {
  text-align: center;
  margin-bottom: 0;
  font-family: "Oswald";
  text-transform: uppercase;
  font-size: 2.5rem;
}
#about p {
  align-self: center;
  padding: 2em 8em;
  line-height: 1.8;
  font-size: 1.2rem;
  font-family: "Average";
}
#expertise {
  height: 50%;
  width: 100%;
  background-color: #7BB0A6;
}
#recent-works {
  height: 50%;
  width: 100%;
  background-color: #523D1F;
}
#contact {
  height: 50%;
  width: 100%;
  background-color: #FF6766;
}
footer {
  height: 20%;
  width: 100%;
  background-color: red;
}
<!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="https://fonts.googleapis.com/css?family=Average|Oswald:300,400,700">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <!-- Sidebar Wrapper -->
  <div id="sidebar">
    <a href="#">S</a>

    <h1>Saad Al-Sabbagh</h1>
    <p>Front-End Developer
      <br>and Author @ <a href="#">SitePoint</a>
    </p>

    <ul>
      <li>
        <a href="#" class="fa fa-twitter"></a>
      </li>
      <li>
        <a href="#" class="fa fa-linkedin"></a>
      </li>
      <li>
        <a href="#" class="fa fa-telegram"></a>
      </li>
    </ul>

    <nav>
      <ul>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#expertise">Expertise</a>
        </li>
        <li><a href="#recent-works">Recent Works</a>
        </li>
        <li><a href="#contact-us">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Wrapper -->
  <div id="content">

    <!-- About -->
    <section id="about">
      <h2>About</h2>

      <p>Hi, I'm Saad (Sa'ad), a front-end developer from Kirkuk (Northern Iraq). I'm also an avid problem solver, blogger and UX designer I write about design on SitePoint, and about everything else on my Blog!
        <br>
        <br>I am a firm believer in self-learning and that everything can be learned through hard work, and this generally helps me increase my knolwedge on various topics and add new stuff into my repertoire everyday.
        <br>
        <br>I'm currently available for hire or take on freelance work. Feel free to browse through my expertise, recent works, and do not hesitate to contact me!</p>
    </section>

    <!-- Expertise -->
    <section id="expertise">

    </section>

    <!-- Recent Works -->
    <section id="recent-works">

    </section>

    <!-- Contact -->
    <section id="contact">

    </section>

    <!-- Footer -->
    <footer>

    </footer>

  </div>

</body>

</html>

答案 2 :(得分：0)

问题解决了。我从#content。

中的每个容器中删除了高度
相关问题
最新问题