html - html&css 中的笔记本便利贴样式菜单

Question

我想创建一个像笔记本便利贴一样的菜单。看起来像这样:

基本上想并排放置两个 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>

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