HTML/CSS/JS 固定下的内容滚动条 div

Question

你好，我的问题是有人可以帮助我成为页脚上内容的滚动条。

How it looks on the browser

这里是代码片段

HTML:

<body>
    <div class="major">
        <div class="torso">
        <div id="gallery">
        </div>
        <div class="bone">
            <div class="aero">
                Menu
            </div>
            <div class="magneticaero">
                <a href="index.html" class="geo">
                    <div class="chest">
                        <div class="flaticon-house158">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>

CSS:

html,head,body,p,div,a,ul,h2{
margin: 0;
padding: 0;
font-family: sans-serif,Century Gothic,CenturyGothic,AppleGothic;
text-decoration: none;}

.major{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;}

.torso{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y: scroll;}

.bone{
width: 100%;
height: 70px;
margin: 0;
padding: 0;
bottom: 0;
position: fixed;
background-color: #C2C2C2;
text-align: center;
transition: 1s;}

.aero{
width: 100%;
height: 40px;
box-shadow: 0 0 1px #FFF;
padding-top: 15px;
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
color: #FFF;}

.magneticareo{
width: 100%;
height: 360px;}

.chest{
width: 25%;
height: 350px;
box-shadow: 0 0 1px #FFF;
float: left;
font-size: 25px;
font-weight: bold;
color: #FFF;}

.boneup{
height: 350px;}

.photo{
width: 100%;
height: auto;
padding: 0;
margin: 0;}

.order{
width: 20%;
height: auto;
padding: 0;
margin: 0;
float: left;}

The solution i search

如果有人能帮助我，我将非常感激 :-) 蒂姆

Answer 1

从所有其他元素中取出.aero，将其直接向下移动到</body>上方，并给它一个固定位置bottom: 0

另外，将 .major 的高度设置为 calc(100% - 40px) ，即 window 减去 .aero 的高度。（并在其上使用 box-sizing: border-box 使其真正只高 40px。）

查看网站后添加：将 height: calc(100% - 70px); 分配给 .torso-gallery - 这与我在上面描述的效果相同，您将不再需要更改 HTML 结构。

HTML/CSS/JS 固定下的内容滚动条 div

HTML/CSS/JS content scrollbar under fixed div

html

css

scroll

position

fixed