將滾動條添加到具有innerhtml屬性的div

Question

我試圖將滾動條添加到具有內部html屬性屬性的div，但它不起作用。這是用溢出溢出控制div的css：auto屬性。我也曾嘗試將該屬性設置爲溢出：滾動，但仍然沒有工作

.inner-container { 
    min-height: 400px; 
    display: inline-block; 
    overflow-y: auto; 
    border: 3px solid #999; 
    border-radius: 10px 10px 10px 10px; 
} 

#first-container { 
    height: 70%; 
    width: 60%; 
    padding-top:5px; 
    padding-left:5px; 
    margin-left: 79px; 
    margin-top: 15px; 
} 

#second-container { 
    height: 70%; 
    width: 22%; 
    padding-top:5px; 
    padding-left:5px; 
} 

應用CSS到HTML

<div id="first-container" class="inner-container"> 

    </div> 

    <div id="second-container" class="inner-container"> 

這是我如何與一個JSON響應

填充第一容器

if (xhr.status === 200) { 
    var json = JSON.parse(response.target.responseText); 
    var first_container = document.getElementById('first-container'); 
     ... 
} 
first_container.innerHTML = first; 

如何強制滾動條對我的div是我的挑戰。

Answer 1

.inner-container { 
 
    display: inline-block; 
 
    border: 3px solid #999; 
 
    border-radius: 10px; 
 
    padding: 5px 15px; 
 
    box-sizing: border-box; 
 
    vertical-align: top; 
 
    overflow-y: auto; 
 
} 
 

 
#first { 
 
    width: 50%; 
 
    margin-right: 15px; 
 
    max-height: 400px; 
 
} 
 

 
#second { 
 
    width: 30%; 
 
    max-height: 400px; 
 
}

<div class="inner-container" id="first"> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sodales fringilla. Sed condimentum elit non urna ultricies, vitae sollicitudin lectus convallis. Cras ut dolor eget sapien auctor facilisis ut vel neque. Etiam vel nisl ex. Praesent quis euismod dui, sit amet euismod lacus. Aliquam vitae arcu at sapien mollis cursus. Morbi ultrices, urna in imperdiet venenatis, massa elit blandit mauris, ac egestas massa elit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, tincidunt eget leo ut, lacinia volutpat velit. Aenean cursus nibh blandit, feugiat purus et, euismod odio. Vestibulum ac pharetra ex.</p> 
 
\t <p>Morbi id eros tempus, malesuada nisi eu, auctor est. Proin interdum mauris sed velit consequat, eget lacinia velit mollis. Maecenas vitae diam id dolor suscipit maximus. Nam nec leo imperdiet, feugiat est non, euismod lacus. Sed sollicitudin nec risus vitae consectetur. Donec maximus nisi sollicitudin turpis dapibus, dapibus gravida sapien malesuada. Praesent at cursus odio. Donec porttitor convallis magna, ac porttitor lacus pharetra sit amet. In dictum erat at auctor dapibus. Quisque ut elit elementum, volutpat tortor in, egestas tortor. Nunc iaculis ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor odio, elementum a ipsum ut, sollicitudin varius metus.</p> 
 
\t <p>Etiam nec elit nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a viverra nunc. Donec placerat metus ligula, ut imperdiet ipsum hendrerit id. Etiam at porta nisl, in sodales est. Sed eget nunc mauris. Aenean vehicula dolor metus, eget aliquet nunc cursus sit amet. Maecenas tempus mi sit amet nisl molestie, in efficitur eros euismod. Nam in dictum nisi.</p> 
 
\t <p>Vestibulum tempor nisi volutpat sapien vehicula pulvinar. Curabitur in risus ut felis euismod ultricies id et nisi. Nullam quis laoreet risus. Duis dui mauris, interdum eget congue sollicitudin, dapibus id nunc. Proin placerat orci a suscipit auctor. Proin at vulputate odio. Duis porttitor libero viverra neque suscipit tincidunt. Integer eu pellentesque orci, tempus ullamcorper lectus. Ut convallis libero eu sagittis aliquam. Integer efficitur dolor augue, at elementum purus consectetur ac. Quisque vel congue felis. Vestibulum dolor justo, dapibus aliquam nulla at, condimentum sodales justo. Nullam consectetur luctus nunc, id sodales felis pellentesque eu. Quisque quis pharetra diam, eget sollicitudin urna.</p> 
 
\t <p>Donec lorem tortor, congue non sem a, malesuada cursus nunc. Sed tristique odio odio, eget fermentum velit suscipit a. Maecenas interdum mi a lectus consectetur, ac lacinia elit aliquet. Praesent turpis sapien, ultricies a risus id, sollicitudin varius urna. Nam sed ligula rutrum, bibendum sem eu, posuere odio. Cras pharetra dolor vitae mattis tincidunt. Ut dignissim tellus et purus ultricies rutrum. Phasellus id posuere dui. Proin ex neque, varius et nisi at, malesuada semper erat. Vestibulum accumsan vulputate massa sit amet euismod. Curabitur vulputate mattis tellus at suscipit. Sed a congue lacus, ut pulvinar nibh. Aenean porttitor ipsum dui, et pellentesque erat posuere in. Curabitur nulla massa, varius at porta sed, sodales at leo.</p> 
 
</div> 
 

 
<div class="inner-container" id="second"> 
 
\t <p>Morbi id eros tempus, malesuada nisi eu, auctor est. Proin interdum mauris sed velit consequat, eget lacinia velit mollis. Maecenas vitae diam id dolor suscipit maximus. Nam nec leo imperdiet, feugiat est non, euismod lacus. Sed sollicitudin nec risus vitae consectetur. Donec maximus nisi sollicitudin turpis dapibus, dapibus gravida sapien malesuada. Praesent at cursus odio. Donec porttitor convallis magna, ac porttitor lacus pharetra sit amet. In dictum erat at auctor dapibus. Quisque ut elit elementum, volutpat tortor in, egestas tortor. Nunc iaculis ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor odio, elementum a ipsum ut, sollicitudin varius metus.</p> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sodales fringilla. Sed condimentum elit non urna ultricies, vitae sollicitudin lectus convallis. Cras ut dolor eget sapien auctor facilisis ut vel neque. Etiam vel nisl ex. Praesent quis euismod dui, sit amet euismod lacus. Aliquam vitae arcu at sapien mollis cursus. Morbi ultrices, urna in imperdiet venenatis, massa elit blandit mauris, ac egestas massa elit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, tincidunt eget leo ut, lacinia volutpat velit. Aenean cursus nibh blandit, feugiat purus et, euismod odio. Vestibulum ac pharetra ex.</p> 
 
\t <p>Vestibulum tempor nisi volutpat sapien vehicula pulvinar. Curabitur in risus ut felis euismod ultricies id et nisi. Nullam quis laoreet risus. Duis dui mauris, interdum eget congue sollicitudin, dapibus id nunc. Proin placerat orci a suscipit auctor. Proin at vulputate odio. Duis porttitor libero viverra neque suscipit tincidunt. Integer eu pellentesque orci, tempus ullamcorper lectus. Ut convallis libero eu sagittis aliquam. Integer efficitur dolor augue, at elementum purus consectetur ac. Quisque vel congue felis. Vestibulum dolor justo, dapibus aliquam nulla at, condimentum sodales justo. Nullam consectetur luctus nunc, id sodales felis pellentesque eu. Quisque quis pharetra diam, eget sollicitudin urna.</p> 
 
</div>

Answer 2

如果你把overflow: scroll;滾動條將始終可見，即使他們不需要。

最好的是使用overflow: auto;，這樣滾動條就會在必要時出現。但是你也應該設置div的高度。您可以使用高度min-/max-，以使其更具響應性。

對於水平滾動條使用overflow-x，垂直使用overflow-y。

Answer 3

使用

.inner-container { 
      min-height: 400px; 
      display: inline-block; 
      overflow-y: scroll; /* vertical scroll */ 
      border: 3px solid #999; 
      border-radius: 10px 10px 10px 10px; 
      }