我正在处理我的投资组合，我遇到了一个问题，即about部分内的文本没有动态增加容器的高度。每当用户调整大小时。
这是我的代码。
/* === 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;
}<!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>
答案 0 :(得分：0)
在flex: 0 0 0
#about
像：
#about {
background-color: #e0e4cc;
display: flex;
flex: 0 0 0;
flex-direction: column;
height: 100%;
width: 100%;
}
/* === 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;
}<!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>
答案 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。
中的每个容器中删除了高度