Question

我必须在这篇文章的前言中说我的CSS不是很好！我有一个页面左侧有一个菜单，它本质上是一个无序列表，包含在div中以应用CSS

<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始终保持120px宽度，bottomSection div自己调整大小，所以无论窗口大小如何，它们都会并排放置是什么？我原以为使用百分比作为宽度属性会实现这个目标吗？

提前致谢！

Answer 1

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

Answer 2

让我先解释一下我的解决方案，建议您在左侧菜单中使用百分比，以便移动设备获得良好的体验。在一个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（忽略左侧菜单）; right设置为0，以拉伸到屏幕的另一侧。
vertical-align设置为top，以保持子div对齐。

CSS - 左侧菜单

2 个答案: