代码之家 › 专栏 › 技术社区 › Dr.PB

用css组织html结构

css html javascript

Dr.PB · 技术社区 · 6 年前

sideNav:半固定位置,可根据自己的内容大小滚动。
主显示:半固定位置,可根据自己的内容大小滚动。
页脚:固定在底部。

半固定:通常在屏幕上是固定的,但是当它的内容到达最后时(如果sideNav/main显示的可滚动内容很大),只有页脚部分会在屏幕底部向上。

最好是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>

2 回复 | 直到 6 年前

Shubham 6 年前

所做的更改:

1) 添加页脚

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

2) 对于主显示器:

为侧导航添加固定宽度

更新:

https://jsfiddle.net/6wbfukj9/25/

注意:避免使用calc。它会在每次鼠标移动时导致calclulation,从而有效地造成浏览器的压力。

Dr.PB 6 年前

谢谢大家抽出时间。我是这样做的。。。

: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>