页面宽度设置100%，并且设置padding-left页面超出处理方案

最新推荐文章于 2022-12-01 15:39:50 发布

AI前端高级工程师

最新推荐文章于 2022-12-01 15:39:50 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43837268/article/details/86237445

web前端专栏收录该内容

419 篇文章

订阅专栏

本文深入探讨CSS样式设置，包括宽度、高度、内边距及盒模型等核心属性，旨在帮助前端开发者掌握网页布局的关键技巧。

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

.news-item{
    width: 100%;
    height: px2rem(90px);
    padding-left: px2rem(15px);
    padding-right: px2rem(15px);
    box-sizing: border-box;
  }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AI前端高级工程师

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

设置div的时候有时候用到宽度100%会导致撑破盒子的问题解决

weixin_42302291的博客

01-02

1959

相信大家在做网页页面设计的时候，都会遇到这么一个问题：在设计俄罗斯套盒的时候（我在说什么？）咳咳，即当盒子里面再套一个盒子的时候，里面盒子由于外面盒子的border和其本身设置的border，padding，margin等元素，会把外面的盒子给撑破了。即使在外面的盒子加了padding也不能解决这个情况。我在学习设计一个类似QQ空间的网页的时候也遇到了这个问题，里面text area撑破了外面的...

padding 后尺寸变化设置_div宽度设置width:100%后再设置padding或margin超出父元素的解决办法...

weixin_39789646的博客

12-21

528

前言本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。语法box-sizing: content-box|border-box|inherit;值一、content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内...

参与评论您还未登录，请先登录后发表或查看评论

子元素宽度100%，但是父元素加了Padding，子元素宽度超出问题

coding...

03-09

3035

子元素宽度100%，但是父元素加了Padding，子元素宽度超出问题

div宽度设置width:100%后再设置padding超出父元素( flex设置width: 100%后超过屏幕)|css:box-sizing

秋叶原的黑猫的博客

07-12

3758

在全局css样式中设置该属性，可以使得在整个项目中设置的width和height方式都相同，设置的width即为所看到的宽度，不会出现容器“越界”的情况。如下图所示，子元素宽度大于父元素，这样可能会导致屏幕溢出，出现滑动条。最终将该样式文件引用到整个项目即可，具体引用方法这里不再赘述。我们可以在父元素中设置。...

设置width:100%再设置margin或padding溢出的问题

liuye066的专栏

09-09

1269

第一种情况：父子组件width都设为100%，子组件中设置了margin，溢出解决方法：在父组件中加入display: inline-flex即可 <div style="width: 100%; display: inline-flex;"> <div style="width: 100%; background-color: #46b6c8; margin: 12px;">sdsdffsdfsdf===== </div> </

移动端h5 输入框padding-left会导致放大

Genge

12-18

3136

移动端html5 输入框padding-left会导致放大解决办法： input { width: calc(100% - 10px); padding-left: 10px; } 目前而言，好的解决之道是width和padding均采用百分比值，例如下面这样： firefox低版本可能存在问题 input { width: 92%; padding-le

H5页面footer宽度设置100%，移动端隐藏横向滚动条并自适应宽度

最新发布

06-15

2.设置footer宽度为100%，并确保其不超出视口宽度。3.隐藏横向滚动条，但保留纵向滚动条（如果需要）。具体步骤：-使用`box-sizing:border-box`确保内边距和边框不会增加元素的总宽度。-设置html和body的宽度为100%...

css 高度等于宽度 padding-top 100% 不生效css 高度等于宽度 padding-top 100% 不生效

10-13

举个例子，如果一个元素的父元素高度是100px，而元素本身也设置了 `height: 100%`，那么实际的高度将是100px，此时加上 `padding-top: 100%`，也就是再加100px的垂直填充，实际上会让元素超出其父元素，而不是像期望...

.signature-trace-drawer display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 1001; background: rgba(0, 0, 0, 0.5); justify-content: center align-items: center overflow: scroll .signature-trace-content width 100% justify-content: center align-items: center .signature-trace-wrapper-body position relative background: white margin-left 20px margin-right 20px padding 0 20px border-radius: 12px .signature-trace-wrapper-close position: absolute left 50% bottom -50px height 24px width 24px @extends button.close // background: url(../images/close_lt.png) no-repeat center / cover background-size: 20px background-color: white; opacity: 1 border-radius: 100% transform: translate(-50%, -50%) text-align: center color : rgb(166,166,166) span font-size 20px line-height 24px .signature-trace-title font-size: 17px font-weight bold padding-top: 15px margin-bottom: 10px text-align: center color #202020 .signature-trace-image-container background: url('../images/miziGrid.png') no-repeat center/cover; background-size: 100% 100% background-repeat: repeat; position relative aspect-ratio 1 border-radius: 12px; background-color: #F5F5F5; display: flex justify-content: center align-items: center overflow hidden .ps-sign position absolute height 100% min-width 100% aspect-ratio 1 z-index 1002 .canvas height 100% width 100% .signature-trace-spinner display: none width 24px height 24px position: absolute top: 50% left 50% background: url('../images/loading.gif') no-repeat center/cover; transform translate(-50%, -50%) .signature-trace-template-img display: none; width 100% opacity: 0.4; background: no-repeat center/cover; .signature-trace-template-text display: none; justify-content: center align-items: center width: calc(100% - 50px); height: calc(100% - 50px) position: absolute top: 45% left 50% transform: translate(-50%, -50%) opacity: 0.4; .signature-trace-reload-content display: flex align-items: center justify-content: center position: absolute top: 50% left 50% transform: translate(-50%, -50%) .signature-trace-reload font-size 14px color #808080 white-space: nowrap; span color #808080 .signature-trace-button display: flex; justify-content: space-between; align-items: center; margin: 20px 20px 0 padding-bottom: 20px .signature-trace-resetting font-size 14px flex-grow:1; width 100px height 36px line-height 36px text-align: center background: #F5F5F5; margin-right: 10px border-radius: 16px color #202020 opacity: 0.3; .signature-trace-determine font-size 14px background-color: #ED5151 flex-grow:1; height 36px; width 100px line-height 36px text-align: center color #FFFFFF border-radius: 16px opacity: 0.3; .signature-trace-determine.center-block height 35px width 182px flex-grow 0 position relative left 50% transform translateX(-50%) @media only screen and (min-device-aspect-ratio:3/4) .signature-trace-drawer .signature-trace-content .signature-trace-wrapper-body margin-left 60px margin-right 60px .signature-trace-title font-size 12px 如上的样式，我在特别宽的屏幕上打开比如说平板上，signature-trace-wrapper-body就会变的很大，导致他的子元素signature-trace-wrapper-close关闭按钮看不到，signature-trace-button按钮区域也在屏幕上看不到，滚动也滚动不了，应该如何解决呢？能让这个signature-trace-content这个元素及其子元素整个展示在页面中自适应，宽高比例不变吗？应该如何修改呢

05-28

内容区域.signature-trace-content可能占满整个宽度，但子元素.signature-trace-wrapper-body的左右边距在宽屏上可能导致其宽度过大，超出可视区域，特别是当屏幕很宽时，margin-left和margin-right设置为固定值（如...

<el-form-item label="寄件人" style="margin-left: 50px;margin-top: 20px;width: 100% "> <el-select v-model="sendAddr.sender_address" @change="sendaddrChange" placeholder="请选择寄件人" style="flex:1;width: 100%"> <el-option :label="'请选择寄件人'" :value="0"></el-option> <el-option v-for="(item, index) in getShopAddr.addr" :key="index" :label="item" :value="index"></el-option> </el-select> </el-form-item>对他设置100%不起作用怎么回事

03-15

好的，用户在使用element-ui的el-select时遇到了宽度设置为100%但未生效的问题。我需要先找出可能的原因，并提供解决方案。首先，用户提到已经尝试了style="width: 100%"，但没效果。可能的原因有几个： 1. **父...

html+css高度100%的时候边框超出，出现滚动条的解决办法，带边框的100%高度

weixin_34077371的博客

11-29

1163

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

vue中css使用padding-left导致input框变长

Bright2017的博客

01-23

3169

问题是这样的，我需要做一个响应式的登录框，宽度不能设置死，我是使用的element-ui框架做的。发现页面当中账号和密码这一行的长度要比下面多出来。仔细检查代码发现，取消了padding-left：20px；之后就正常了。解决方式， 1.改成缩进即可，text-indent:20px; 2.这是因为盒子模型不同。简单说，两种模式，一种是当前的元素宽高包含了padding，一种是不包

padding 影响文本多行溢出

Meet的博客

12-01

775

多行溢出加上padding之后显示失效了。在换行元素外边套一层。

因为padding和border宽度导致子元素超过父元素的解决方法

meteoite的博客

06-23

3471

因为padding和border宽度导致子元素超过父元素的解决方法在 CSS 盒子模型的默认定义里，对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。如对child container赋予如下的css，最终的样式将会变成这样。 .child{ width: 100%; border: solid #5B6DCD 10px; padding: 5px;

vue项目实现移动端适配后pc端页面放大问题解决

jiangjunyuan168的博客

11-07

1373

问题：今天在做一个vue项目的过程中，在一个项目中实现了pc端和移动端两套代码的自动切换，在移动端中用postcss转换成vw进行布局，但是实现后发现pc端也被转换了，pc端上的页面样式由于被转成vw后进行了放大。解决方法：找到pc端的承载组件的html文件（默认是public下的index.html文件）然后修改meta标签修改前： <meta name="viewport" content="width=device-width,initial-scale=1,user-scalab

解决padding高度溢出和自适应高度的小方法

sunny的博客

08-08

7059

1.利用css3中的box-sizing: border-box，防止padding-top高度溢出。（相当于IE6的盒模型） 2.解决自适应高度，实现正方形子盒子。 <div class="wrapper"> <div class="img"></div> </div> * { margin: 0; padding...

多方法解决设置width:100%再设置margin或padding溢出的问题

weixin_34281537的博客

04-26

9972

2019独角兽企业重金招聘Python工程师标准>>> ...

safari 第一次进入页面无法整体padding-left进行位置移动

qq_25239049的博客

01-23

482

safari 第一次进入页面无法整体padding-left进行位置移动具体原因不详解决方法添加position: relative;即可

行内元素padding-left用百分比

aliven1的博客

12-18

1057

行内元素padding-left用百分比，不会撑起父元素，会直接换行，用px为单位不会