如何使内容在div底部

最新推荐文章于 2023-05-29 09:54:42 发布

原创最新推荐文章于 2023-05-29 09:54:42 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div

工作日记专栏收录该内容

7 篇文章

订阅专栏

这篇博客探讨了如何确保内容在div元素的底部显示，重点介绍了一种实现这一效果的方法，尤其适用于需要插入美观代码片段的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使内容在div底部

- 如何插入一段漂亮的代码片

如何插入一段漂亮的代码片

主要的就是这个段代码introduce.scrollTop = introduce.scrollHeight.

function switchs(lable){
        var lable1 = document.getElementById('lable1');
        var lable2 = document.getElementById('lable2');
        var qrCode = document.getElementById('qrCode');
        var introduce = document.getElementById('introduce')
        let qrCodeShow =''
        let detailsShow = ''
        if(lable=='lable1'){
            lable1.className='lable1'
            lable2.className='lable2'

            //底部样式更改
            qrCodeShow = "<img src='./qrcode.png'/>"
            qrCodeShow +="<div class='qrCodeText'>"
            qrCodeShow +="<p>观看更多直播</p>"
            qrCodeShow +="<p>请长按右侧二维码</p>"
            qrCodeShow +="<p>识别并关注公众号</p>"
            qrCodeShow +="</div>"
            qrCode.innerHTML = qrCodeShow 

            detailsShow = "<p class='introduceLine'><span>讲题：</span>"+details.title+"</p>"
            detailsShow += "<p class='introduceLine'><span>时间：</span>"+details.time+"</p>"
            detailsShow += "<p class='introduceLine'><span>讲者：</span>"+details.doctor+"</p>"
            detailsShow += "<p class='introduceLine'><span>医院：</span>"+details.hosp+"</p>"
            detailsShow += "<p class='introduceLine'><span>介绍：</span>"+details.presentation+"</p>"
            introduce.innerHTML =detailsShow
        }else{
            lable2.className='lable1'
            lable1.className='lable2'

            //
            for(let i of comment){
                detailsShow +="<div class='photo'>"
                detailsShow +=" <img src='"+ i.photo+"'/>"
                detailsShow +="<div class='test'>"
                detailsShow +=" <p class='photoName'>"+ i.name+"</p>"
                detailsShow +=" <p class='photoText'>"+ i.text+"</p>"
                detailsShow +=" </div></div>"
            }
            introduce.innerHTML = detailsShow
            introduce.scrollTop = introduce.scrollHeight
            //底部样式更改
            qrCodeShow =" <div class='speak'>"
            qrCodeShow +="<input id='speak' placeholder='请遵守法律法规，文明发言' />"
            qrCodeShow +="<div class='bnt' onclick='submit()'>发   表</div>"
            qrCodeShow +="</div>"
            qrCode.innerHTML = qrCodeShow 
            
           
        }
    }