爲什麼溢出不工作？

Question

在下面的代碼中，爲什麼'overflow-y'在class'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並打開scroll-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>