Question

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

这里是代码片段

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 OUT，将其向下移动到</body>上方，并使用bottom: 0

给它一个固定的位置

我另外，将.major的高度设置为calc(100% - 40px)，即高达窗口减去.aero的高度。（并在其上使用box-sizing: border-box实际上只能使它高40px。）

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

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

1 个答案: