问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

宽度不固定，如何设置一个div宽度也是不固定，但是居左右边距都是1rem？

头像
小七哥
    404285179

    如题，期望不要用百分比表示，这个在不同的屏幕上差距太大了，我期望左右边距永远都是1rem，谢谢。

    前端html5csscss3javascript
    阅读 1.7k
    2 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542
      ✓ 已被采纳
      头像
      陟上晴明
        21.4k144991

        利用 padding 或者 positon:absolute 即可。

        image.png

        <style>
  body {
    width: 100vw;
    height: 100vh;
    padding: 1rem
  }
  #demo {
    width: 100%;
    height: 100%;
    background: gray;
  }
</style>
<body>
  <div id="demo"></div>
</body>

        image.png

        <style>
  #demo {
    background: gray;
    position:absolute;
    left: 1rem;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
</style>
<body>
  <div id="demo"></div>
</body>

        不过一般来说借助 viewport 单位就好了，就是 vw/vh 这俩兄弟。

        😂😂 看错题目了，原来只要左右 1rem，直接用1楼的方法就可以了。

        本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题