Проблема в том, что div установлен на 100% из 100% (тело), что делает это для нас, но не для браузера. Если вы установите абсолютное положение тела и установите его сверху, снизу, слева, справа на 0, вы получите тот же эффект, и настройка высоты div будет работать так, как вы ожидаете. Вот код.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>