为什么溢出-y 不起作用？

Question

在下面的代码中，为什么 'overflow-y' 在类 'dialogo' 中不起作用？ 我以某种方式尝试过，但我做不到。 响应式 CSS 似乎多次令人困惑。

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body,div,menu,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    overflow-x: hidden;
}
</style>
<style>
html {
  background: #E2CE99;
}
.container {
  position: relative;
  width: 70%;
  background-color: red;

  font-family: helvetica, sans-serif;
  border: 2px solid black;
  float: left;
  left: 2%;

  padding-left: 2px;
}
.containerd {
  position: relative;
  width: 70%;
  background-color: white;

  font-family: helvetica, sans-serif;
  border: 2px solid black;
  float: right;
  right: 2%;

  padding-left: 2px;
}
.content {
  position: relative;
  padding-top: 10px;
}
.content p {

}
#header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #CC1111;
  color: white;
}
#header h1 {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
}
    .dialogo{
        resize: vertical;
        width: 100%;
        top: 1%;
        position: relative;
        font-size: 15px;
        overflow-y: scroll;
        background-color: white;
        word-wrap:break-word;
        text-align: left;
        border:1px solid black;
        height: 50%;
    }

    </style>
</head>
<header id="header">
    <center>Jhon</center>
</header>
<div style="padding-top: 70px;"></div>
<div class = dialogo disabled id="texConv" name="texConv">
<div class="content">
  <div class="container">
  <p>HELLO</p>
  </div>
</div>
<div class="content">
  <div class="containerd">
  <p>HELLO</p>
  </div>
</div>
</div>
<br>
<div class="content">&nbsp 2017</div>
</html>

所以我想知道如何为包含盒子的 div 设置百分比高度并打开滚动 Y。

Answer 1

要让overflow-y起作用，元素中内容的高度需要超过指定的高度。我将高度更改为5em，您可以看到它正在工作。

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  html,
  body,
  div,
  menu,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    overflow-x: hidden;
  }
</style>
<style>
  html {
    background: #E2CE99;
  }
  
  .container {
    position: relative;
    width: 70%;
    background-color: red;
    font-family: helvetica, sans-serif;
    border: 2px solid black;
    float: left;
    left: 2%;
    padding-left: 2px;
  }
  
  .containerd {
    position: relative;
    width: 70%;
    background-color: white;
    font-family: helvetica, sans-serif;
    border: 2px solid black;
    float: right;
    right: 2%;
    padding-left: 2px;
  }
  
  .content {
    position: relative;
    padding-top: 10px;
  }
  
  .content p {}
  
  #header {
    z-index: 2;
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #CC1111;
    color: white;
  }
  
  #header h1 {
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
  }
  
  .dialogo {
    resize: vertical;
    width: 100%;
    top: 1%;
    position: relative;
    font-size: 15px;
    overflow-y: scroll;
    background-color: white;
    word-wrap: break-word;
    text-align: left;
    border: 1px solid black;
    height: 5em;
  }
</style>
</head>
<header id="header">
  <center>Jhon</center>
</header>
<div style="padding-top: 70px;"></div>
<div class="dialogo" disabled id="texConv" name="texConv">
  <div class="content">
    <div class="container">
      <p>HELLO</p>
    </div>
  </div>
  <div class="content">
    <div class="containerd">
      <p>HELLO</p>
    </div>
  </div>
</div>
<br>
<div class="content">&nbsp 2017</div>

</html>