Question

标题：固定在屏幕顶部。
sideNav：半固定位置，可根据其自身的内容大小滚动。
mainDisplay：半固定位置，可根据其自身的内容大小滚动。
脚：固定在底部。

sideNav和mainDisplay并排

半固定：通常在屏幕上是固定的，但是当其内容到达末尾时（在sideNav / mainDisplay的滚动内容较大的情况下），则仅页脚部分会在页面底部向上屏幕。

仅HTML，CSS，JS是首选。可以实施半固定的想法吗？任何帮助...

* {
  margin: 0px;
  padding: 0px;
}

header,
section,
footer,
aside,
nav,
article,
hgroup {
  display: block;
}

body {
  text-align: center;
}

:root {
  --navMenuWidth: 100px;
}

#header {
  margin: 0px;
  padding: 10px;
  background: #6A1B9A;
  color: azure;
  position: fixed;
  width: 100%;
  height: 20px;
}

#footer {
  margin: 0px;
  padding: 10px;
  background: #D500F9;
  bottom: 0;
}

#sideNav {
  position: fixed;
  left: 0px;
  top: 40px;
  text-align: center;
  height: calc(100vh - 40px);
  width: var(--navMenuWidth);
  overflow: auto;
  list-style-type: none;
  background: linear-gradient(#ec7014, #081d58);
  float: left;
}

.mainDisplay {
  width: calc(100% - var(--navMenuWidth));
  display: inline-block;
}

<body>
  <div id="header">This is the header</div>

  <div id="mainBox">
    <nav id="sideNav">
      <ul>
        <li class='menuItem hasSubMenu'>
          <div class="subMenu">
            <span class="menuLabel" title="Item 1">Item 1</span>
            <span class="subMenuIcon"></span>
          </div>
          <ul class="subMenuList">
            <li class="subMenuItem">
              <a href="http://google.com">Submenu1</a>
            </li>
            <li class="subMenuItem">
              <a href="http://google.com">Submenu2</a>
            </li>
          </ul>
        </li>
        <li class="menuItem">
          <a href="#">
            <span class="menuLabel" title="Item 2">Item 2</span>
          </a>
        </li>
      </ul>

      <button id="iconMenu" class="iconMenu">
            <span class="iconMenuLabel" title='iconMenu'>icon menu</span>
        </button>
    </nav>

    <div id="mainDisplay">
      Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </div>
  </div>
  <div id="footer">This is the footer</div>
</body>

Answer 1

所做的更改：

1）添加了页脚

position:fixed  //to fix it at bottom
width:100%      //to display div with 100% width

2）for mainDisplay：

从侧面导航和主显示中删除了动态宽度分量，并添加了位置：相对于侧面导航。所以现在主显示也做了相应的更改。

在侧面导航中添加了固定宽度

更新：

提琴：https://jsfiddle.net/6wbfukj9/25/

注意：避免使用calc。它会导致每次鼠标移动时产生计算结果，从而有效地导致浏览器紧张。

Answer 2

感谢大家的宝贵时间。我是通过以下方式完成的...

:root {
    --navMenuWidth: 200px;
    --headerHeight: 50px;
}

*{
	margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
}

body {
    display: inline-block;
}

#header{
    width: 100vw;
    height: var(--headerHeight);
    background: rgb(186, 43, 214)
}

#sideNav{
    overflow: auto;
    width: var(--navMenuWidth);
    height: calc(100vh - var(--headerHeight));
    float: left;
}
.menuItem{
    height: 100px;
}

#mainDisplay{
    overflow: auto;
    width: calc(100vw - var(--navMenuWidth));
    height: calc(100vh - var(--headerHeight));
}

#footer{
  background: rgba(66, 212, 74, 0.904);
}

<body>
  <div id="header">This is the header</div>

  <div id="mainBox">
    <nav id="sideNav">
      <ul>
        <li class='menuItem hasSubMenu'>
          <div class="subMenu">
            <span class="menuLabel" title="Item 1">Item 1</span>
            <span class="subMenuIcon"></span>
          </div>
          <ul class="subMenuList">
            <li class="subMenuItem">
              <a href="http://google.com">Submenu1</a>
            </li>
            <li class="subMenuItem">
              <a href="http://google.com">Submenu2</a>
            </li>
          </ul>
        </li>
        <li class="menuItem">
          <a href="#">
            <span class="menuLabel" title="Item 2">Item 2</span>
          </a>
        </li>
        <li class="menuItem">
          <a href="#">
            <span class="menuLabel" title="Item 2">Item 2</span>
          </a>
        </li>
        <li class="menuItem">
          <a href="#">
            <span class="menuLabel" title="Item 2">Item 2</span>
          </a>
        </li>
      </ul>
    </nav>

    <div id="mainDisplay">
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </div>
  </div>
  <div id="footer">This is the footer</div>
</body>

使用CSS

2 个答案: