main.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Canada</title>
<link rel='stylesheet' href='css/normalize.css' type='text/css' media='screen'>
<link rel='stylesheet' href='css/site.css' type='text/css' media='screen'>
</head>
<body>
<div class="main-container">
<header>
<h1>Canadian Provinces and Territories</h1>
<div id="logo"> <img class="flag" src="images/Canada.png" alt="Canada"> Canada</div>
</header>
<nav>
<ul>
<li> <a href="http://en.wikipedia.org/wiki/Alberta">Alberta</a></li>
<li> <a href="http://en.wikipedia.org/wiki/British_Columbia">British Columbia</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Manitoba">Manitoba</a></li>
<li> <a href="http://en.wikipedia.org/wiki/New_Brunswick">New Brunswick</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Newfoundland_and_Labrador">Newfoundland and Labrador</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Nova_Scotia">Nova Scotia</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Northwest_Territories">Northwest Territories</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Nunavut">Nunavut</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Ontario">Ontario</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Prince_Edward_Island">Prince Edward Island</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Quebec">Quebec</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Saskatchewan">Saskatchewan</a></li>
<li> <a href="http://en.wikipedia.org/wiki/Yukon">Yukon</a></li>
</ul>
</nav>
<section class="main">
<div class="province" id="AB"> <img class="flag" src="images/Alberta.png" alt="Alberta">
<div class="description">Alberta is Canada's fourth-most populous province and most populous of Canada's three prairie provinces. Alberta and its neighbour, Saskatchewan, were established...</div>
<a href="http://en.wikipedia.org/wiki/Alberta">Read more</a></div>
<div class="province" id="BC"> <img class="flag" src="images/British_Columbia.png" alt="British Columbia">
<div class="description">British Columbia is also a component of the Pacific Northwest, along with the U.S. states of Oregon and Washington. The province's name was chosen by Queen...</div>
<a href="http://en.wikipedia.org/wiki/British_Columbia">Read more</a></div>
<div class="province" id="MB"> <img class="flag" src="images/Manitoba.png" alt="Manitoba">
<div class="description">Manitoba is a Canadian prairie province. The province, with an area of 649,950 square kilometres (250,900 sq mi), has a largely continental climate, with...</div>
<a href="http://en.wikipedia.org/wiki/Manitoba">Read more</a></div>
<div class="province" id="NB"> <img class="flag" src="images/New_Brunswick.png" alt="New Brunswick">
<div class="description">New Brunswick is one of Canada's three Maritime provinces and is the only province in the Canadian federation that is constitutionally bilingual...</div>
<a href="http://en.wikipedia.org/wiki/New_Brunswick">Read more</a></div>
<div class="province" id="NL"> <img class="flag" src="images/Newfoundland_and_Labrador.png" alt="Newfoundland and Labrador">
<div class="description">Newfoundland and Labrador is the most easterly province of Canada. Situated in the country's Atlantic region, it incorporates the island of Newfoundland... </div>
<a href="http://en.wikipedia.org/wiki/Newfoundland_and_Labrador">Read more</a></div>
<div class="province" id="NS"> <img class="flag" src="images/Nova_Scotia.png" alt="Nova Scotia">
<div class="description">Nova Scotia is one of Canada's three Maritime provinces and constitutes one of the four Atlantic Canada provinces. Located almost exactly halfway between... </div>
<a href="http://en.wikipedia.org/wiki/Nova_Scotia">Read more</a></div>
<div class="province" id="NT"> <img class="flag" src="images/Northwest_Territories.png" alt="Northwest Territories">
<div class="description">The Northwest Territories is a territory of Canada. With a population of 43,537 in 2013, the Northwest Territories is the most populous territory in Northern...</div>
<a href="http://en.wikipedia.org/wiki/Northwest_Territories">Read more</a></div>
<div class="province" id="NU"> <img class="flag" src="images/Nunavut.svg.png" alt="Nunavut">
<div class="description">Nunavut is the largest, northernmost and newest territory of Canada. It was separated officially from the Northwest Territories on April 1, 1999, via the Nunavut...</div>
<a href="http://en.wikipedia.org/wiki/Nunavut">Read more</a></div>
<div class="province" id="ON"> <img class="flag" src="images/Ontario.png" alt="Ontario">
<div class="description">Ontario is one of the ten provinces of Canada, located in east-central Canada. It is Canada's most populous province by a large margin, accounting for nearly...</div>
<a href="http://en.wikipedia.org/wiki/Ontario">Read more</a></div>
<div class="province" id="PE"> <img class="flag" src="images/Prince_Edward_Island.png" alt="Prince Edward Island">
<div class="description">Prince Edward Island (PEI or P.E.I.) is a Canadian province consisting of the main island itself, as well as other islands. It is one of the three Maritime ...</div>
<a href="http://en.wikipedia.org/wiki/Prince_Edward_Island">Read more </a></div>
<div class="province" id="QC"> <img class="flag" src="images/Quebec.png" alt="Quebec">
<div class="description">Quebec is a province in east-central Canada. It is the only Canadian province that has a predominantly French-speaking population, and the only one to have...</div>
<a href="http://en.wikipedia.org/wiki/Quebec">Read more</a></div>
<div class="province" id="SK"> <img class="flag" src="images/Saskatchewan.png" alt="Saskatchewan">
<div class="description">Saskatchewan (Listeni/səˈskætʃəwən/ or /səˈskætʃəˌwɑːn/) is a prairie province in Canada, which has a total area of 651,900 square kilometres (251,700 sq mi) and... </div>
<a href="http://en.wikipedia.org/wiki/Saskatchewan">Read more</a></div>
<div class="province" id="YT"> <img class="flag" src="images/Yukon.png" alt="Yukon">
<div class="description">Yukon is the westernmost and smallest of Canada's three federal territories. Whitehorse is the territorial capital and Yukon's only city. The territory was split from...</div>
<a href="http://en.wikipedia.org/wiki/Yukon">Read more</a></div>
</section>
<footer>
<script >
var dt=new Date(document.lastModified);
document.write('This page was last updated on '+dt.toLocaleString())
</script>
</footer>
</div>
</body>
</html>
的CSS
div.province.description
{
max-height: 165px;
overflow-y: scroll;
overflow-x: hidden;
margin: 8px;
}
所以我需要做
元素不得 高于 165像素
•仅当内容超出165像素高时，显示滚动条
•如果内容水平不适合容器，请隐藏滚动条
•顶部和底部边距必须为8像素
但它似乎不适用于滚动条。我在做什么问题？
答案 0 :(得分：1)
你只需要一个空格：
div.province.description
{
max-height: 165px;
overflow-y: scroll;
overflow-x: hidden;
margin: 8px;
}
应该是
div.province .description
{
max-height: 165px;
overflow-y: scroll;
overflow-x: hidden;
margin: 8px;
}
div.province.description是div的选择器，包含＆＃34;省＆＃34;和＆＃34;描述＆＃34;类。您正在尝试使用类＆＃34;描述＆＃34;选择元素。包含在省内＆＃34;省＆＃34;类。只需在＆＃34;省＆＃34;之后添加一个空格。而且你很好。不知道你的其他CSS，因为它没有发布。
此外，您可以尝试使用overflow-y：auto，如果内容超出高度，它将仅显示滚动条，正如您在第一个项目符号点中所规定的那样。
答案 1 :(得分：0)
我认为内容不会超过165px，因此描述从不需要滚动任何东西。也许尝试限制province div的宽度。这将导致文本更频繁地中断并扩展显示它所需的高度。