javascript - 我想根据浏览器高度更改链接元素的边距

Question

我的页面左侧有一个垂直菜单 div，底部有 6 个链接和一张图片。链接的样式为框。我希望能够使用 JS 来更改链接框的边距，以便它们填充高度但不会因分辨率较小而消失。 这是我尝试过但没有效果的方法。

这是CSS

.sidebar {
    float: left;
    background-color:#FFFFFF;
    background-image: url('../images/sandMenu1.jpg');
    width: 150px;
    min-height: 100vh;
    color: #04B4AE;
    margin-top: 50px;
    background-size:  100%;
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 1;
    padding-top: 35px;
    position: fixed;
}

#sidebarLink a:link, a:visited{
   display: inline-block;
   font-weight: bold;
   background-color: #D7F5BA;
   color: #04B4AE;  
   width: 90px;
   padding: 4px;
   border-style: outset;
   border-width: 2px;
   border-color: #D8D8D8;
   margin-top: 35px;
   margin-bottom: 35px;
   margin-right: 30px;
   float: right;
}


#sidebarLink a:hover, a:active, a:focus{
   font-weight: bold;
   background-color: #B404AE;
   color: #04B4AE;  
   width: 90px;
   padding: 4px;
   border-style: outset;
   border-width: 2px;
   border-color: #6A0888;
   margin-top: 35px;
   margin-bottom: 35px;
   margin-left: 15px;
   margin-right: 30px;
   float: right;
}   

.sidebarLinkList li {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

这是 HTML。

  <div id="sideMenu" class="sidebar">
<nav id="sidebarLink">
  <ul class="sidebarLinkList">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="link.html">link</a></li>
    <li><a href="Destination.html">Destination</a></li>
    <li><a href="homepage.html">Home</a></li>
    <li><a href="homepage.html">Home</a></li>
  </ul>
</nav>
<div>
  <img src="images/sand.jpg" class="sand" id="sidePic">
</div>
  </div>

 <script>
   var winHeight = $(window).height();
   var winWid = $(window).width();
   var spacing = 0;
   var menuHeight = 0;
   menuHeight = (winHeight - 280); /*header height+image height+image margin = 280px*/
   spacing = (menuHeight - (6 * 25))/12; /*links are ~25px tall*/
   document.getElementById("sidebarLink").style.marginTop=spacing+"px";
   document.getElementById("sidebarLink").style.marginBottom=spacing+"px";
  </script>

我愿意接受任何建议，我不打算使用 Javascript 来做这件事。 谢谢。

Answer 1

您可以使用 css 高度百分比来完成这一切。 您可以使用 css3 calc计算图像上方菜单的高度，并为 li 元素提供 16% 的高度以均匀填充拆分菜单:

HTML

<div id="sideMenu" class="sidebar">
    <nav id="sidebarLink">
        <ul class="sidebarLinkList">
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="link.html">link</a></li>
            <li><a href="Destination.html">Destination</a></li>
            <li><a href="homepage.html">Home</a></li>
            <li><a href="homepage.html">Home</a></li>
        </ul>
    </nav>
    <img src="http://lorempixel.com/200/100/" alt="" />
</div>

CSS

#sideMenu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
}
#sidebarLink {
    height: 80%;
    height: -webkit-calc(100% - 100px);
    height: calc(100% - 100px);
}
#sideMenu ul {
    padding: 0;
    margin: 0;
    height: 100%;
}
#sideMenu ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 16.66666666666666666666666666666666%;
}
#sideMenu ul > li > a {
    font-weight: bold;
    background-color: #D7F5BA;
    color: #04B4AE;
    width: 90px;
    padding: 4px;
    border-style: outset;
    border-width: 2px;
    border-color: #D8D8D8;
    text-decoration: none;
    display: block;
    -webkit-transition: all 200ms;
    transition: all 200ms;
}
#sideMenu ul > li:hover > a {
    background-color: #B404AE;
    color: #04B4AE;
    border-color: #6A0888;
}

Demo