увеличить поверхность div без изменения самого размера элемента

Question

Я хочу, чтобы смайлик div (который появляется после того, как пользователь попал в стену) будет покрывать основную поверхность лабиринта, не изменяя размер смайлика: можете ли вы мне помочь?

здесь ссылка скрипку: http://jsfiddle.net/uqcLn/66/

является смайлик дивы:

#highlight_lose { 
    height: 300px; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    margin-top: -150px; 
    display: none; 
} 
div.sad_smileyface { 
    width: 300px; 
    height: 100%; 
    position: relative; 
    margin: 0 auto; 
    border-radius: 150px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    background: #ffe632; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e)); 
    background: -moz-linear-gradient(top, #fffe8d, #f6d23e); 
    box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); 
    -webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); 
    -moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); 
} 

Answer 1

Вам просто нужно изменить height в #highlight_lose от тока 300px до 550px (высота лабиринта) ,

Также не требуются margin-top и top (я предполагаю, что они изначально использовались только для центровки серой области до середины).

#highlight_lose { 
    height: 550px; 
    width: 100%; 
    position: absolute; 
    display: block; 
    background: gray; 
} 

EDIT: Изменение CSS, как показано ниже для div.sad_smileyface, чтобы убедиться, что смайлик не имеет вытянутую взгляд на него.

div.sad_smileyface { 
    width: 300px; 
    height: 300px; /* modified from 100% to 300px because 100% would now mean 550px whereas initially it would have been just 300px */ 
    top: 25%; /* added this to position the smiley face at middle */ 
    position: relative; 
    margin: 0 auto; 
    border-radius: 150px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    background: #ffe632; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e)); 
    background: -moz-linear-gradient(top, #fffe8d, #f6d23e); 
    box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); 
    -webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); 
    -moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); 
} 

Demo Fiddle