jquery - CSS height 和 inline height 属性不服从我

Question

我对容器 div 的高度有疑问。我想 它是 body 的 100%，但不起作用。 我添加了 css body height=100%

var d = document;
$(d).ready(function () {
    $("#con").append($("<div id='d'></div>").css({
        'height':' 50px',
        'width': '100px',
        'background': 'lightgreen',
        'borderRadius':'5px',
        'position':'absolute',
        'left':'100px',
        'top' :'100px'
        
    })).on("mousemove",function(e){
    var x = e.pageX-$("#con").offset().left;
    var y = e.pageY-$("#con").offset().top;
        $("#d").html(x+" "+y);
    });
    
});

/*edit*/ 
body ,html {
  margin:0;
  height:100%;}
/*endof edit*/
#con{
    border:1px solid black;
    width:100%;
    height:100%;/*not working as expected*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="con" height="100%"></div>
<!-- height attribut above and css height dont ant to take

effect-->

Answer 1

为了使高度的 % 值有效，您需要一个引用值，父级的固定值 ... 为 html 和 body 设置 100%标签也是:

html, body {
  margin:0;
  height:100%;
}

var d = document;
$(d).ready(function () {
    $("#con").append($("<div id='d'></div>").css({
        'height':' 50px',
        'width': '100px',
        'background': 'lightgreen',
        'borderRadius':'5px',
        'position':'absolute',
        'left':'100px',
        'top' :'100px'
        
    })).on("mousemove",function(e){
    var x = e.pageX-$("#con").offset().left;
    var y = e.pageY-$("#con").offset().top;
        $("#d").html(x+" "+y);
    });
    
});

html, body {
  margin:0;
  height:100%;
}
#con{
    background:black;
    width:100%;
    height:100%;/*not working as expected*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="con" height="100%"></div>
<!-- height attribut above and css height dont ant to take

effect-->