实现原理:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
|
<style> #parent{ width: 1000px; height:200px; display: flex; background-color: #FFFFFF; } #left1 { width: 100px; height: 100%; background-color: black; } #left2 { width: 300px; height: 100%; background-color: #426196; } #auto { flex: 1 1 auto; height: 100%; background-color: orangered; } </style> <body> <div id="parent"> <div id="left1"> </div> <div id="left2"> </div> <div id="auto"> </div> </div> </body>
|
知识点:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
超出滚动,但是不显示滚动条
实现原理:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
<style> .container { margin: 0 auto; height: 600px; width: 400px; background: #FFFFFF; overflow: hidden; border: 1px solid blueviolet; } .second-container { width: 430px; padding-right:30px; height: 600px; overflow-x: hidden; overflow-y: scroll; } .content { width: 400px; } </style> <div class="container"> <div class="second-container"> <div class="content"> <p>M</p><p>M</p><p>M</p><p>M</p><p>M</p><p>M</p><p>M</p><p>M</p> <p>M</p><p>M</p><p>M</p><p>M</p><p>M</p><p>M</p><p>M</p><p>M</p> <p>+</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p> <p>+</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p><p>+</p> </div> </div> </div>
|
知识点:利用一个宽度大于内容的div把滚动条藏到看不到的地方
近期评论