Erlo

textarea绝对定位百分比的情况会上下拖拽

2020-09-26 21:30:36 发布   322 浏览  
页面报错/反馈
收藏 点赞

需求:实现父盒子垂直居中情况的textarea只向下拖拽

法一有bug:父盒子绝对定位百分比

代码如下:

#form_table {
    width: 480px;
    padding: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 15px;
}
textarea {
    padding: 8px 0 0 12px;
    border-radius: 3px;
    border-color: #dcdfe6;
    font-size: 16px;
    /* 只可以调节元素的高度 */
    resize: vertical;
    /* 控制拖拽到最小高度 */
    min-height: 30px;
}

效果实现

 

法二:父盒子margin自适应

代码如下:

#form_table {
    width: 480px;
    margin: 60px auto;
    background-color: #fff;
    border-radius: 15px;
}

效果实现

 

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认