html＆css中的筆記本貼子樣式菜單

Question

我想創建一個像筆記本貼紙一樣的菜單。似乎是這樣的：

基本上要並排放置兩個div側，使左格頁面，右div的菜單。如果頁面高度增加，兩個菜單元素之間的空間應該按比例擴大。我一直在嘗試2天的代碼是這樣的：

<div class="specific_recipeBook_withStickers"> 

    <div class="specific_recipeBook"> 
     <div class="specific_recipeBook_spiral"></div> 
     <div class="specific_recipeBook_main"> 

      <ul class="specific_recipeBook_list"> 
       <li class="specific_recipeBook_list_unit"> 
        <div class="specific_recipeBook_main_lines"></div> 

        <a class="specific_resipeBook_list_unit_text" ><h4 id="specific_resipeBook_list_unit_name">Kuru Fasulye</h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi u</a> 
       </li> 
      </ul> 
     </div> 

    </div> 
    <div class="specific_recipebook_stickers"> 
     <div class="specific_recipeBook_sticker" id="recipeBook_stickers_1" ><a class="specific_recipeBook_stickers_text">Salata</a> </div> 
     <div class="specific_recipeBook_sticker" id="recipeBook_stickers_2" ><a class="specific_recipeBook_stickers_text">Tatlı</a></div> 
     <div class="specific_recipeBook_sticker" id="recipeBook_stickers_3" ><a class="specific_recipeBook_stickers_text">Yan Yemek </a></div> 
     <div class="specific_recipeBook_sticker" id="recipeBook_stickers_4" ><a class="specific_recipeBook_stickers_text">Anayemek </a></div> 
    </div> 
</div> 

JSFiddle

但都不盡如人意。我應該用什麼方式來做？

Answer 1

使用這樣的功能

$(document).ready(function ($) { 

    $(".specific_recipeBook").each(function(j,d) { 
     var maxHeight = 0; 
     maxHeight = $(d).height(); 
     var ratioedHeight = maxHeight*0.08; 
     console.log(maxHeight); 
     document.getElementById("recipeBook_stickers_1").style.marginBottom = 3+ ratioedHeight+"px"; 
     document.getElementById("recipeBook_stickers_1").style.marginBottom = 3+ ratioedHeight+"px"; 
     document.getElementById("recipeBook_stickers_2").style.marginBottom = 3+ ratioedHeight+"px"; 
     document.getElementById("recipeBook_stickers_3").style.marginBottom = 3+ ratioedHeight+"px"; 
     document.getElementById("recipeBook_stickers_4").style.marginBottom = 3+ ratioedHeight+"px"; 
    }); 
});