выпадающее меню, что движется все содержимое сайтов

Question

поэтому в основном я хочу сделать что-то вроде этого: https://jsfiddle.net/czqy1jts/

HTML

<div id="cont1"> 
    <div id="wrap"> 
     <div id="footer1"></div> 
     <div id="footer2">HOVER OVER ME</div> 
     <div id="footer3"> 
      <div id="viissees"></div> 
     </div> 
    </div> 
</div> 

Css

#wrap { 
    height:inherit; 
    width:100%; 
    position:relative;  
    bottom:0; 
    background-color:purple; 
} 


#footer1 { 
    height:10%; 
    background-color:yellow; 
    width:100%; 
    position:relative; 
} 

#footer2 { 
    height:20%; 
    background-color:purple; 
    width:100%; 
    text-align:center; 
} 

#footer3 { 
    height:80%; 
    background-color:red; 
    width:100%; 
    bottom:0px; 
} 

wrap наследует высоту от контейнера, высота которого задается с помощью jQuery (windo w.height) footer1 скрыт, и я использую slideToggle на нем. Итак, когда кто-то нависает над нижним колонтитулом2, нижний колонтитул 1 раскрывается, а нижний колонтитул2 и нижний колонтитул3 опускаются, делая комнату до нижнего колонтитула2.

Но я хочу, чтобы он подошел снизу, используя% для моих div. поэтому я решил, что установил нижнюю часть обертки: 0; и я устанавливаю высоту: авто ...

<div id="wrap"> 
    <div id="footer3"></div> 
    <div id="footer2">HOVER OVER</div> 
    <div id="footer1"></div> 
</div> 

и он работает, но не с процентами. https://jsfiddle.net/nfLs1xy9/ Это достигается с помощью модулей vh, но я слишком поздно опоздал, что поддержка для них слишком минимальна, поэтому я подумал, что я должен начать все сначала и попытаться сделать это с% в конце концов. но я не могу понять, как. Я пробовал все свои идеи, и я думаю, что у меня заканчивается. проблема в том, что моя обертка должна быть автоматической и внизу, так что, когда я slidetoggle скрытый элемент, он освобождает место для скрытого элемента, тем самым перетаскивая все остальные содержимое вверх. но я не могу установить его в auto, потому что тогда мои divs не знают, на чем основать их% on.

Возможно ли это?

(если мой английский сосала, то извините, не мой 1. Язык и мой 1. пост в переполнение стека, поэтому мои извинения, если я сделал какие-новобранец ошибки.)

Answer 1

все равно ... я нашел решение , я сбросил метод slidetoggle и вместо этого использовал mouseenter и mouseleave.

https://jsfiddle.net/4kso7125/

$("#footer1").hide(); 
var minuMeetod = function() { 
    $("#footer1").show(); 
    $("#wrap").animate({ 
     bottom: "+10%" 
    }, 100); 
}; 
$("#footer2").bind("mouseenter", minuMeetod); 
$("#footer1").on("mouseenter", function() { 
    $("#footer2").unbind("mouseenter"); 
}); 



$("#footer3").on("mouseenter", function() { 
    $("#footer2").bind("mouseenter", minuMeetod); 
}); 
$("#footer1").on("mouseleave", function() { 
    $("#footer1").fadeOut(); 
    $("#wrap").animate({ 
     bottom: "-0em" 
    }, 100); 
}); 

если кому-то интересно, есть решение. Я в основном добавил меню внизу и спрятал его. а затем в mouseenter я просто заставил его показать (или fadein), а затем я анимировал весь контент и отвязал метод, чтобы он не начал повторять свою функцию. а затем перетащите его, когда мышь касается основной части содержимого. вы можете проверить скрипку. я не удивлюсь, если я немного запутаюсь. если это поможет кому-то в будущем, тогда yay. во всяком случае, спасибо за потенциальную помощь.