- 标题:固定在屏幕顶部。
- sideNav:半固定位置，可根据自身内容大小滚动。
- mainDisplay:半固定位置，可根据自身内容大小滚动。
- 页脚:固定在底部。
sideNav 和 mainDisplay 并排放置
semi-fixed:通常在屏幕中是固定的，但是当它的内容到达末尾时(sideNav/mainDisplay的可滚动内容较大的情况下)则只有footer部分会在底部向上屏幕。
最好只使用 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>最佳答案
所做的更改:
1) 添加页脚
position:fixed //to fix it at bottom
width:100% //to display div with 100% width
2) 对于 mainDisplay:
从侧面导航和主显示中移除了动态宽度组件，并添加了position:relative于侧面导航。所以现在主显示相应地改变了。
为侧边导航添加了固定宽度
更新:
fiddle :https://jsfiddle.net/6wbfukj9/25/
注意:避免使用 calc。它会导致对每次鼠标移动进行计算，有效地对浏览器造成压力。
关于javascript - 用css组织html结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51809649/