Question

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像素

但它似乎不适用于滚动条。我在做什么问题？

Answer 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，如果内容超出高度，它将仅显示滚动条，正如您在第一个项目符号点中所规定的那样。

Answer 2

我认为内容不会超过165px，因此描述从不需要滚动任何东西。也许尝试限制province div的宽度。这将导致文本更频繁地中断并扩展显示它所需的高度。

在我的描述文本中添加滚动条

2 个答案: