CSS 边距 vh 无法正常工作 [英] CSS margin vh not working right

问题描述

 #grenze{背景:绿色；高度:96vh；宽度:96vh；}#baukasten{背景:白色；高度:86vh；宽度:86vh；余量:5vh；边框:1px 实心#DDDDDD；溢出:隐藏；}

<div id="baukasten">

边距仅适用于左侧而不适用于顶部，我尝试使用不同的浏览器，但始终相同.这里可能有什么问题?是bug吗?

我不能在 grenze 上使用填充，因为

 $( ".dragresize" ).draggable({收容:#grenze"});

不会做我需要的

解决方案

#grenze {背景:绿色；高度:96vh；宽度:96vh；填充:5vh；box-sizing: 边框框；}#baukasten {背景:白色；高度:86vh；宽度:86vh；边框:1px 实心#DDDDDD；溢出:隐藏；}

<div id="baukasten">

#grenze {背景:绿色；高度:96vh；宽度:96vh；}#baukasten {背景:白色；高度:86vh；宽度:86vh；变换:翻译(5vh，5vh)；边框:1px 实心#DDDDDD；溢出:隐藏；}

<div id="baukasten">

    #grenze
    {
    	background: green;
    	height: 96vh;
    	width: 96vh;
    }
    
    #baukasten
    {
    	background: white; 
    	height: 86vh; 
    	width: 86vh; 
    	margin: 5vh;
    	border: 1px solid #DDDDDD;  
    	overflow: hidden;
    }

<div id="grenze">
   <div id="baukasten">   
   </div>
</div>

Margin works only to left but not to top, I tried with different browsers and it's always the same. What could be the problem here? Is it a bug?

EDIT:

I can't use padding on grenze instead because

            $( ".dragresize" ).draggable({
                containment: "#grenze"
            });

Won't do what I need

解决方案

#grenze {
  background: green;
  height: 96vh;
  width: 96vh;
  padding: 5vh;
  box-sizing: border-box;
}

#baukasten {
  background: white;
  height: 86vh;
  width: 86vh;
  border: 1px solid #DDDDDD;
  overflow: hidden;
}

<div id="grenze">
  <div id="baukasten">
  </div>
</div>

#grenze {
  background: green;
  height: 96vh;
  width: 96vh;
}

#baukasten {
  background: white;
  height: 86vh;
  width: 86vh;
  transform: translate(5vh, 5vh);
  border: 1px solid #DDDDDD;
  overflow: hidden;
}

<div id="grenze">
  <div id="baukasten">
  </div>
</div>

这篇关于CSS 边距 vh 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！