我把侧边栏的高度调到202%，让它和两篇文章的高度相等，因为两篇文章之间的边距把相等的对齐方式搞乱了。但是为什么当我把浏览器最小化的时候，侧边栏的高度会发生一点变化，变得更短？如果我再手动对齐它，使侧边栏相等，当我把浏览器扩大到全尺寸时，现在的高度太长了。为什么会出现这种情况？
CSS:
* {
margin:0;
padding:0;
box-sizing:border-box;
}
header {
background-color:lightgray;
height:150px;
color:black;
text-align:;
display:flex;
justify-content:center;
align-items:center;
font-size:50px;
font-family:OCR A Stf, monospace;
}
header a {
text-decoration:none;
color:black;
}
nav {
background-color:darkblue;
color:white;
text-align:center;
}
nav a {
text-decoration:none;
margin:10px;
color:white;
}
article {
background-color:white;
height:100%;
padding:15px;
overflow:;
width:80%;
border:1px solid lightgray;
float:left;
margin-bottom:15px;
}
article h2 {
padding-bottom:30px;
color:black;
}
footer {
background-color:lightgray;
color:black;
font-size:20px;
padding:15px;
width:100%;
text-align:center;
}
.sidebar {
padding:15px;
width:18%;
height:200%;
background-color:white;
border:1px solid lightgray;
margin-bottom:15px;
float:right;
}
@media (max-width:700px) {
.sidebar, .pics, .pics2 {
width:100%;
}
}
和HTML
<head>
<title>No Internet</title>
<link rel="stylesheet" type="text/css" href="css for new wc3.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<a href="new-wc3.html">Cities of the world</a>
</header>
<nav>
<a href="new york page.html">New York City</a>
<a href="#2">Los Angeles</a>
</nav>
<section style="background-color:#f1f1f1; padding:30px; overflow:hidden">
<aside class="sidebar">
<p>This should be a sidebar</p>
</aside>
<article class="pics">
<h2>Please select a city.</h2>
</article>
<article class="pics2">
<h2>Please select a city.</h2>
</article>
</section>
<footer>
<p>Copyright © 2020, Cities of the World</p>
</footer>
</body>
这个答案在这里只是为了告诉OP，我使用的是贴出的准确代码。以后会删除的....
* {
margin:0;
padding:0;
box-sizing:border-box;
}
header {
background-color:lightgray;
height:150px;
color:black;
text-align:;
display:flex;
justify-content:center;
align-items:center;
font-size:50px;
font-family:OCR A Stf, monospace;
}
header a {
text-decoration:none;
color:black;
}
nav {
background-color:darkblue;
color:white;
text-align:center;
}
nav a {
text-decoration:none;
margin:10px;
color:white;
}
article {
background-color:white;
height:100%;
padding:15px;
overflow:;
width:80%;
border:1px solid lightgray;
float:left;
margin-bottom:15px;
}
article h2 {
padding-bottom:30px;
color:black;
}
footer {
background-color:lightgray;
color:black;
font-size:20px;
padding:15px;
width:100%;
text-align:center;
}
.sidebar {
padding:15px;
width:18%;
height:200%;
background-color:white;
border:1px solid lightgray;
margin-bottom:15px;
float:right;
}
@media (max-width:700px) {
.sidebar, .pics, .pics2 {
width:100%;
}
}<header>
<a href="new-wc3.html">Cities of the world</a>
</header>
<nav>
<a href="new york page.html">New York City</a>
<a href="#2">Los Angeles</a>
</nav>
<section style="background-color:#f1f1f1; padding:30px; overflow:hidden">
<aside class="sidebar">
<p>This should be a sidebar</p>
</aside>
<article class="pics">
<h2>Please select a city.</h2>
</article>
<article class="pics2">
<h2>Please select a city.</h2>
</article>
</section>
<footer>
<p>Copyright © 2020, Cities of the World</p>
</footer>