0

我正在构建一个 Wordpress 网站，左侧有一个固定的侧边栏菜单，右侧是容器内的主要内容。我不确定对菜单进行编码的最佳做法是什么，因为我目前已将菜单编码为位于主容器 div 之外。由于某种原因，我还注意到如果桌面屏幕尺寸不够宽，我的内容会溢出到左侧的菜单中，并且我的一些菜单在底部被切断（一些链接不可见）我是不确定这是否与屏幕高度有关？

菜单的 HTML 如下所示：

<div id="menuBar">
    <img class="logo" src="wp-content/themes/starkers-master/images/lulu-logoi-01.png" width="180" height="250" alt="Lulu Plews Logo"/>         
     <ul>
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
     </ul>  
</div>

CSS是：

.menu-menu-1-container {
  position: fixed;
  left: 8.8%;
  top: 300px;
  border-right: 1px solid #D1D2D4;
  height: 10000px;
}

#menuBar {
    position: fixed;
    left: 8.15%;
    top:0;
    padding: 0 30px 0 0;
    border-right: 1px solid #D1D2D4;
    margin: 0 auto 0 auto;
}

我只是想要一些关于我应该如何编码以及我的代码是否有问题的建议？我认为它缺少一些明显的东西，但我不知道它可能是什么？

4

1 回答 1

0

我想出了解决问题的方法；当时我没有意识到在position: fixed;元素上使用会使它失去流动性。

首先，我在不知不觉中添加position:fixed;了父元素 >.menu-menu-1-container这不是必需的，无论如何也没有帮助。我还从这个 div 中删除了所有其他样式，因为它们是多余的。

其次，我纠正了样式#menuBar；我向它添加了 100% 的高度并删除margin:0 auto;（它什么也没做，因为我没有声明宽度，它也不需要居中，所以这是多余的）。然后我添加了一个宽度#menuBar并删除了左侧样式属性。

第三，我发现将固定侧边栏放在主容器 div 之外并使用左边距和填充设置主容器 div 的样式是正确的。

这是一个指向我所有代码的小提琴的链接，下面是我的 CSS 片段：

#menuBar {
    position: fixed;
    width: 150px;
    background-color: #DDD; 
    font-size: 18px;
    top: 0;
    bottom: 0;
    border-right: 1px solid #D1D2D4;   
}

#menuBar a {
  display:block;
  padding:15px;
  color: #000;
  text-decoration: none;
}
.content {
  position: relative;            
  margin-left: 200px;
}

希望它可以帮助其他人在像固定位置侧边栏这样简单的事情上苦苦挣扎。

于 2017-01-03T11:56:24.647 回答