當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

内容滚动条和子div高度自适应

發(fā)布時(shí)間：2023/12/29 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了内容滚动条和子div高度自适应小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

內(nèi)容滾動(dòng)條和子div高度自適應(yīng)

寫(xiě)在前面：老套路有圖有真相，這才叫做分享。本文內(nèi)容是：一個(gè)div里面，兩個(gè)子div高度自適應(yīng)（平分父div的高度）和元素內(nèi)容過(guò)多的時(shí)候，根據(jù)需求出現(xiàn)高度滾動(dòng)條或者寬度滾動(dòng)條。

先放最終效果（在下面會(huì)有demo代碼。）：

Paste_Image.png

實(shí)現(xiàn)這些效果要怎么做呢？咱一步一步來(lái)。

第一步：

先設(shè)置html結(jié)構(gòu)：這里我已經(jīng)搭好了。

<div class="box"><div class="box1">填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</div><div class="box2">填充填充</div> </div>

第二步然后開(kāi)始寫(xiě)css樣式了（我會(huì)把踩坑經(jīng)歷放上去，所以不要一步一步走，看效果）：

設(shè)置父元素box的樣式：

.box{margin: 0 auto;width: 40%;background: #ccc;height: 15rem;border: 5px solid red; /*為了區(qū)分各個(gè)box界限*/}

設(shè)置box1的樣式：

.box1{min-height: 3rem;max-height: 13rem;background: coral;}

現(xiàn)在界面是這樣子的：

Paste_Image.png

現(xiàn)在嘗試把html解除注釋：

Paste_Image.png

然后瀏覽器里面變成這樣了。。。

Paste_Image.png

excuse me？？？說(shuō)好的滾動(dòng)條呢？說(shuō)好的自適應(yīng)呢？

下面就到了關(guān)鍵的部分了（文章末尾有demo，不想看的話，可以自己試試。）：

在上面我們已經(jīng)設(shè)置了最大高度和最小高度，因?yàn)閎ox1空間不夠所以溢出來(lái)了。

Paste_Image.png

overflow屬性大家去看下，http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
知道你們不會(huì)去看，所以我又放圖片了。。。

Paste_Image.png

所以對(duì)于這部分我們要隱藏起來(lái)。加個(gè)overflow: hidden;變成。

大家也都注意到了overflow: scroll;這個(gè)屬性，是的，我們加上去試試。

Paste_Image.png

滾動(dòng)條是出來(lái)了，但是X軸的滾動(dòng)條是什么鬼？
所以百度好久的答案，你們有福了！—————overflow-x: hidden;

Paste_Image.png

然后我順便查到上面的簡(jiǎn)寫(xiě)方式。
原來(lái)用overflow-x: hidden;overflow-y: auto;這兩行代碼就可以做到！
我剛才是這樣子的

.box1{min-height: 3rem;overflow: hidden;max-height: 13rem;background: coral;overflow: scroll;overflow-x: hidden;}

最終的代碼是這樣的。

.box1{min-height: 3rem;max-height: 13rem;background: coral;overflow-x: hidden;overflow-y: auto;}

好了今天的內(nèi)容就到這里了。。等等，好像有什么不對(duì)的地方？
說(shuō)好的div高度自適應(yīng)呢？？
額。。。關(guān)于這個(gè)問(wèn)題，我只有一個(gè)取巧的辦法。
我先放兩張圖片：

Paste_Image.png
Paste_Image.png

ps：這樣就算是自適應(yīng)了吧？

現(xiàn)在的情況是這樣子的：

Paste_Image.png

我把他們兩個(gè)的背景顏色都改成一樣的，再來(lái)看下：

Paste_Image.png

這里也是，實(shí)際上，他的box就那么大。

Paste_Image.png

寫(xiě)這篇花了一個(gè)半小時(shí)，主要是自己昨天才弄懂的，然后今天做demo 的時(shí)候又忘記怎么自適應(yīng)div了，弄了老半天，然后用F12看昨天的代碼才恍然大悟！（其實(shí)昨天沒(méi)真懂，這會(huì)是真懂了），寫(xiě)的是真的累，碼字不易，望且看且珍惜，給個(gè)喜歡吧。

最后又到了觀眾朋友們最喜歡的求贊求關(guān)注環(huán)節(jié)：希望看完的朋友點(diǎn)個(gè)喜歡，想關(guān)注我這個(gè)菜雞是如何成長(zhǎng)的也可以關(guān)注一下我，基本上每個(gè)月都不會(huì)少于十五篇文章（看到干貨我也會(huì)進(jìn)行分享）。然后github也互相加個(gè)star。碼字不易，感謝支持，感激不盡！

說(shuō)好的demo，差點(diǎn)忘記，回來(lái)更新。

<!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; /*為了區(qū)分各個(gè)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">填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</div><div class="box2">填充填充</div> </div></body> </html>

總結(jié)

以上是生活随笔為你收集整理的内容滚动条和子div高度自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： PDF阅读器哪个好用？这几个软件给你带来
下一篇：推荐几个jquery实用的插件