我想根據瀏覽器的高度更改鏈接元素的邊距

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

演示版