html&；css

我想创建一个类似笔记本贴纸的菜单。似乎是这样的：

基本上要并排放置两个div，并使左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>

但它并不奏效。我该怎么做
 使用类似于此函数的功能

$(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";
    });
});

我已经检查了您的代码。在CSS中可能不可能。但我们可以在javascript或jquery中执行。首先，我们需要测量内容高度，如$（'container'）。height（）-->根据内容高度应用于页边空白顶部CSS的第一次单击按钮和第二次单击按钮。注意：$（文档）。就绪（函数（$）{//别忘了，我没能把它放进去。希望你能帮我。