CSS - 左菜单 - 优文库

我必须在这篇文章的前言说我的CSS不是很棒！我有一个网页在左边，这基本上是一个无序列表的菜单，包裹在一个div应用CSSCSS - 左菜单

<div class="leftMenu" id="jobMenu"> 
    <ul> 
     <li ng-click="menuClick(1)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(2)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(3)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(4)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(5)"> 
      <p>Menu Item</p> 
     </li> 
     <li ng-click="menuClick(6)"> 
      <p>Menu Item</p> 
     </li> 
    </ul> 
</div>

菜单CSS：

.leftMenu { 
    display: block; 
    text-align: center; 
    float: left; 
    height: 94vh; 
    border: 1px solid #778390; 
    width: 120px; 
    background-color: #778390; 
    color: white; 
} 

.leftMenu ul { 
    margin-top: 0; 
    list-style: none; 
    padding: 0; 
} 

.leftMenu li { 
    text-align: center; 
    border-bottom: 1px solid #58626B; 
    padding-bottom: 18px; 
    padding-top: 18px; 
    cursor: pointer; 
    font-size: 14px; 
} 

.leftMenu li:hover { 
    background-color: #5d9eca; 
} 

.leftMenu li p { 
    margin: 0; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 13px; 
}

在右手边，我有一个主页，其中有一个Kendo Grid（无论内容是什么都会出现问题）。

<div class="bottomSection"> 
    <kendo-grid options="mainGridOptions"> 
    </kendo-grid> 
</div>

CSS：

.bottomSection { 
    display: block; 
    padding: 12px 15px; 
    /*float: right;*/ 
    width: 84.5%; 
    height: 60%; 
    /*margin-right: 66px;*/ 
}

在大多数显示器，布局呈现完美的，就像这样：

但是如果我调整窗口的大小和/或放大时， bottomSection div被扔在左边的菜单下，如下所示：

我怎样才能使它所以每当窗口大小时，leftMenu始终保持在120像素宽度和bottomSection DIV自身的大小，所以并排他们都托架侧不管窗外是什么规模？我会认为使用百分比作为宽度属性会实现这一目标？

在此先感谢！

来源

2016-12-02 Andrew Milici

.leftMenu { 
    display: block; 
    text-align: center; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 94vh; 
    border: 1px solid #778390; 
    width: 120px; 
    background-color: #778390; 
    color: white; 
} 

.bottomSection { 
    display: block; 
    padding: 12px 15px; 
    width: 100%; 
    padding-left: 135px; 
    height: 60%; 
    box-sizing: border-box; 
}

来源

2016-12-02 03:19:24

嗨Chibiao，我已经删除，不幸的是同样的问题发生。 –

我编辑了答案。 –

让我建议你使用百分比为你左边的菜单也，使移动设备将有一个很好的经验前言我的解决方案。在一个div上有固定的宽度，在另一个div上有一个百分比，你肯定会遇到布局问题。

随着中说，如果你限制使用固定与左边的菜单，这里有一个解决办法 - 我剪了一些标记，把重点放在主要的布局方面：

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.leftMenu { 
 
    background-color: #333; 
 
    color: #FFF; 
 
    height: 200px; /* for demo purposes */ 
 
    width: 120px; 
 
    position: relative; 
 
} 
 
.bottomSection { 
 
    background-color: #CCC; 
 
    color: #FFF; 
 
    padding: 10px; 
 
    position: absolute; 
 
    left: 120px; 
 
    right: 0; 
 
} 
 
.leftMenu, .bottomSection { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="leftMenu">Menu</div> 
 
     <div class="bottomSection"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus congue hendrerit. Phasellus luctus quam in nulla mollis finibus. Quisque feugiat, metus sit amet porta fringilla, elit odio sodales mauris, sed gravida turpis felis vitae turpis. Mauris interdum ac magna vel pretium. Nulla porta rutrum velit mollis congue. Proin pellentesque urna et magna lacinia, et tincidunt mi placerat. Nulla suscipit rhoncus viverra. Integer pulvinar at purus non tristique. 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

注意要点：

使用display: inline-block布局，而不是float。
使用父div（container）：必须设置为position: relative（或可能的absolute）。使用absolute定位bottomSection。 left设置为120px（忽略左侧菜单）;右侧设置为0，伸展到屏幕的另一侧。
vertical-align设置为top，以保持子div对齐顶部。

来源

2016-12-02 03:48:34 cyrotello

CSS - 左菜单

回答

相关问题