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

【问题标题】：HTML/CSS/JS content scrollbar under fixed div固定 div 下的 HTML/CSS/JS 内容滚动条
【发布时间】：2017-02-09 04:39:17
【问题描述】：

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

How it looks on the browser

这里是代码 sn-ps

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

如果有人可以帮助我，我会非常感激 :-) 蒂姆

【问题讨论】：

你到底想达到什么目的？
我尝试成为您看到箭头的第一张图片页脚上方的滚动条，我希望滚动条在箭头指向的位置。语法错误对不起，我希望你明白一切
@SorangwalaAbbasali 我在最后添加了一张新图片，也许可以帮助您理解我的问题。我希望它看起来像图片上的那样。

标签： html css scroll position fixed

【解决方案1】：

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

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

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

【讨论】：

遗憾的是，滚动条对我不起作用，滚动条仍然在错误的位置
你有那个网站在我们可以看到的服务器上吗？
我在一个测试站点上传了所有内容：profiletestsite.000webhostapp.com/gallery.html
你没有把.aero移出.major——它还在里面。但是无论如何，如果您将height: calc(100% - 70px); 分配给.torso-gallery，它具有相同的效果，并且您的滚动条在页脚上方结束。（我会将其添加到我的答案中）
现在它工作得很好，非常感谢 Johannes