【问题标题】:Margin-top grows with smaller widthMargin-top 以较小的宽度增长
【发布时间】:2016-01-04 21:03:21
【问题描述】:

我有一个带有顶部边距(相对于页面顶部)的框,随着浏览器窗口(使用 vw)变小。
但是页面的标题(固定并在不同的 z- index) 受到最小宽度的限制,所以当它达到 1000px 时,我需要 box margin-top 停止变小并且星形变大......就像窗口越小,margin-top 越大...... .
这是盒子...现在我需要创建一个@media 屏幕和 (max-width:1000px) ,它表示高度相对于 vw 变得更大。

#box {
position: relative;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin-top: 5vw;
}

【问题讨论】:

    标签: html css height media-queries


    【解决方案1】:

    你可以用calc()做这样的事情

    Fiddle

    header {
      background: black;
      height: 50px;
      width: 100%;
    }
    
    main {
      background: green;
      margin-top: 10vw;
      height: 100vh;
    }
    
    @media(max-width: 768px) {
      main {
         margin-top: calc(150px - 10vw);
      }
    }
    
    <div class="container">
      <header></header>
      <main></main>
    </div>
    

    【讨论】:

    • 这就是我现在正在尝试的......但我需要制作 calc(50px * 1vw) 并且它给了我无效的属性值......
    • 在我创建的小提琴中发布你想要做的事情并在这里发布
    • 不需要,谢谢,我使用了 calc(150px - 10vw) 就像你说的那样,然后搜索行为正确的值,它工作正常!我用了 calc(100px - 5vw);
    猜你喜欢
    • 2011-12-01
    • 2011-09-19
    • 2018-05-28
    • 1970-01-01
    • 2017-02-13
    • 2011-11-15
    • 2010-09-22
    • 1970-01-01
    相关资源
    最近更新 更多