Question

我试图制作一个包含标题，导航，旁边和部分的菜单。我组织它们的方式如下图所示。

你能在下面的图片上看到：

aside.style.top通过javascript连接到nav的底部。工作得很好..
aside.style.width随window.innerWidth而变化，为15％ window.innerWidth，最大为250px，当时为 window.innerWidth低于750px元素消失。作品细....
当我尝试制作时，问题就开始了部分没有进入旁边留下的空隙（位置：固定），我这样做 js：section.style.left = aside.clientWidth;但这似乎没有对该部分的影响。

我也尝试更改边距，填充部分，也没有效果。

贝娄是两张图片，试图代表我刚刚写的东西。第一个是应该发生的事情，第二个是发生的事情。

最后我有粗暴的代码，你想尝试一下。

任何帮助感谢。

Brute Code：

<doctype html>

<html >
<head>
    <!--<link rel="stylesheet" type="text/css" href="pageStyle.css">-->
    <style>
    body{
        margin:0px;
    }
    header{
        position:relative;
        top:0px;
        text-align:center;
        background-color:blue;
        padding:0px;
        margin:0px;
        width:100%;
        display:block;
        font-size:15px;
    }
    nav{
        position:sticky;
        position: -webkit-sticky;
        display:block;
        top:0px;
        width:100%;
        display:block;
    }
    aside{
        left:0px;
        top:0px;
        height:100%;

        position:fixed;
        overflow:auto;
        opacity: 0.5;
    }
    section{
        position:relative;
        margin-left:100px;
    }

    input[type="color"]{
        border:none;
        -webkit-appearance: none;
    }
    table.table1{
        margin:auto;
        font-family: arial, sans-serif;
        border-collapse: collapse;
        border:1px solid black;
    }



    </style>
</head>
<body>
    <header class="header" style="background-color:green">
        <div>
            Make by The BOSS &copy <br />
            And the Dum one
        </div>
    </header>
    <nav class="nav" id="horMenu" style="background-color:blue">
        <div><span style="font-size:550px;">Nav Div</span></div>

    </nav>

    <aside class="aside" id="leftMenu" style="background-color:gray">
        <div>
            sdfsdfsdf
        </div>

    </aside>
    <div class="section" id="sectionMenu" style="background-color:orange">
        section
        <div class="article" style="background-color:brown">
            <div>
                article
            </div>
        </div>
        <div class="footer" style="background-color:red">
            <div>
                footer
            </div>
        </div>
    </div>


    <script>
        //variables, secton, nav, aside

        window.addEventListener("scroll", stick, false);
        window.addEventListener("load", stick, false);
        var naveMenuId = document.getElementById("horMenu");
        var leftMenuId = document.getElementById("leftMenu");
        var sectionId = document.getElementById("sectionMenu");

        //function for make the aside stick to bottom of nav
        function stick(){

            var pos = naveMenuId.clientHeight;
            pos += naveMenuId.getBoundingClientRect().top;

            leftMenuId.style.top = pos;
        }
        window.addEventListener("resize", resize_x, false);
        window.addEventListener("load", resize_x, false);
        //function to resize aside width with relation to innerWith
        function resize_x(e){

            if(window.innerWidth < 727){
                leftMenuId.style.width = "0px";
                leftMenuId.style.display = "none";  
            }else{
                leftMenuId.style.display = "block";
                var elemWidth = window.innerWidth * 0.15;

                if(elemWidth >= 150){
                    leftMenuId.style.width = "150px";
                }else{
                    leftMenuId.style.width = "15%";
                }
            }

            //code to try to mak section not under lapping the aside
            sectionId.style.width = naveMenuId.getBoundingClientRect().right;

        }

    </script>


    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

如何使元素不在/重叠，其他元素与position：fixed

0 个答案: