javascript,css_div的高度100%总是相对于浏览器的高度而不是相对于其父元素的高度？，javascript,css

div的高度100%总是相对于浏览器的高度而不是相对于其父元素的高度？

下面这段代码，x1_left的高度100%总是相对于浏览器的高度而不是相对于其父元素的高度？如何让它相对于父元素的高度为100%?

<html>
<style>
*{margin:0;padding:0;border:0;}
.x1{width:100%;background:grey;}
.taskbar{width:100%;height:30px;background:yellow;}
.x1_left{width:100px;height:100%;background:red}

</style>

<body>
<div id="x1" class="x1">
    <div id="x1_left" class="x1_left">

    </div>
    <div id="x1_right" class="x1_right">
    
    </div>
</div>
<div id="taskbar" class="taskbar"></div>

</body>
<script>
var scroll_height = document.body.scrollHeight;
var ct_x1 = document.getElementById('x1');
var ct_x1_left = document.getElementById('x1_left');
ct_x1.style.height = scroll_height-30;
ct_x1_left.style.height = '100%';
</script>
</html>

你给x1一个高度吧，height:100%;是相对于父节点的，你没有给父节点的高度所以父节点撑开到100%满屏了