内容滚动条和子div高度自适应
內容滾動條和子div高度自適應
寫在前面：老套路有圖有真相，這才叫做分享。本文內容是：一個div里面，兩個子div高度自適應（平分父div的高度）和元素內容過多的時候，根據需求出現高度滾動條或者寬度滾動條。
先放最終效果（在下面會有demo代碼。）：
Paste_Image.png
實現這些效果要怎么做呢？咱一步一步來。
第一步：
先設置html結構：這里我已經搭好了。
<div class="box"><div class="box1"><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--><!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--><!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--><!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--></div><div class="box2"><span>填充填充</span></div> </div>第二步然后開始寫css樣式了（我會把踩坑經歷放上去，所以不要一步一步走，看效果）：
設置父元素box的樣式：
.box{margin: 0 auto;width: 40%;background: #ccc;height: 15rem;border: 5px solid red; /*為了區分各個box界限*/}設置box1的樣式：
.box1{min-height: 3rem;max-height: 13rem;background: coral;}現在界面是這樣子的：
Paste_Image.png
現在嘗試把html解除注釋：
Paste_Image.png
然后瀏覽器里面變成這樣了。。。
Paste_Image.png
excuse me？？？說好的滾動條呢？說好的自適應呢？
下面就到了關鍵的部分了（文章末尾有demo，不想看的話，可以自己試試。）：
在上面我們已經設置了最大高度和最小高度，因為box1空間不夠所以溢出來了。
Paste_Image.png
overflow屬性大家去看下，http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
知道你們不會去看，所以我又放圖片了。。。
Paste_Image.png
所以對于這部分我們要隱藏起來。 加個overflow: hidden;變成。
大家也都注意到了overflow: scroll;這個屬性，是的，我們加上去試試。
Paste_Image.png
滾動條是出來了，但是X軸的滾動條是什么鬼？
所以百度好久的答案，你們有福了！—————overflow-x: hidden;
Paste_Image.png
然后我順便查到上面的簡寫方式。
原來用overflow-x: hidden;overflow-y: auto;這兩行代碼就可以做到！
我剛才是這樣子的
最終的代碼是這樣的。
.box1{min-height: 3rem;max-height: 13rem;background: coral;overflow-x: hidden;overflow-y: auto;}好了今天的內容就到這里了。。等等，好像有什么不對的地方？
說好的div高度自適應呢？？
額。。。關于這個問題，我只有一個取巧的辦法。
我先放兩張圖片：
Paste_Image.png
Paste_Image.png
ps：這樣就算是自適應了吧？
現在的情況是這樣子的：
Paste_Image.png
我把他們兩個的背景顏色都改成一樣的，再來看下：
Paste_Image.png
這里也是，實際上，他的box就那么大。
Paste_Image.png
寫這篇花了一個半小時，主要是自己昨天才弄懂的，然后今天做demo 的時候又忘記怎么自適應div了，弄了老半天，然后用F12看昨天的代碼才恍然大悟！（其實昨天沒真懂，這會是真懂了），寫的是真的累，碼字不易，望且看且珍惜，給個喜歡吧。
最后又到了觀眾朋友們最喜歡的求贊求關注環節：希望看完的朋友點個喜歡，想關注我這個菜雞是如何成長的也可以關注一下我，基本上每個月都不會少于十五篇文章（看到干貨我也會進行分享）。然后github也互相加個star。碼字不易，感謝支持，感激不盡！
說好的demo，差點忘記，回來更新。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>div-height-roll-demo</title><style>.box{margin: 0 auto;width: 40%;background: #ccc;height: 25rem;border: 5px solid red; /*為了區分各個box界限*/}.box1{min-height: 3rem;max-height: 13rem;background: coral;overflow-x: hidden;overflow-y: auto;}.box2{text-align: center;border-top: 3px solid black;}</style> </head> <body> <div class="box"><div class="box1"><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span><span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span></div><div class="box2"><span>填充填充</span></div> </div></body> </html>總結
以上是生活随笔為你收集整理的内容滚动条和子div高度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PDF阅读器哪个好用？这几个软件给你带来
- 下一篇： 推荐几个jquery实用的插件