个人中心
gpt4 book ai didi

html - 我如何中断此页面上的滚动？

转载 作者：行者123 更新时间：2023-11-28 03:05:21 24 4
gpt4 key购买 nike

我正在构建一个顶部有固定导航栏的单页滚动网站。这也将是一个响应式网站。这些列似乎在断点处堆叠得很好。但是不知何故，在我修复了标题之后，我破坏了滚动功能。用户可以在屏幕上看到的内容下方有文本，因此应该出现一个滚动条。我什至尝试将主要内容放在响应式网格之外的容器中，并为容器设置 2000 像素的高度，但我放弃了这个想法，因为它没有效果。所以，希望有人能告诉我我坏了什么。

这是 html:

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="utf-8" />
<title>Page Title Here</title>


<link rel="stylesheet" type="text/css" href="simplegrid.css" >
<link rel="stylesheet" type="text/css" href="style.css" >
</head>

<body>

<! --- navigation --- >

<div class="nav-cont">
  <div class="navigation">
              <div class="grid">
                <div class="col-4-12">
                  <img src="sblogo.png"alt="logo" height="84" width="88">
                </div>
                <div class="col-2-12">
                  <a href="#">Home</a>
                </div>
                <div class="col-2-12">
                  <a href="#">About</a>
                </div>
                <div class="col-2-12">
                  <a href="#">Pricing</a>
                </div>
                <div class="col-2-12">
                  <a href="#">Contact</a>
                </div>

  </div>
</div>          

<! ---Main Content --- >

<div class="intro">
  <div class="grid grid-pad">
    <div class="col-1-1">
      <h1>Big Heading</h1>
      <h2>Sub Heading</h2>
    </div>
  </div>
</div>

<div class="about">
  <div class="grid grid-pad">
    <div class="col-1-1">
      <h1>Section Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br>
    </div>
  </div>
</div>

</body>

</html>

此样式表提供网格:

/*
  Simple Grid
  Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/
  Project Page - http://thisisdallas.github.com/Simple-Grid/
  Author - Dallas Bass
  Site - dallasbass.com
*/

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0px;
}

[class*='col-'] {
    float: left;
    padding-right: 20px; /* column-space */
}

.grid {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
}

.grid:after {
    content: "";
    display: table;
    clear: both;
}

.grid-pad {
    padding-top: 20px;
    padding-left: 20px; /* grid-space to left */
    padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}

.push-right {
    float: right;
}

/* Content Columns */

.col-1-1 {
    width: 100%;
}
.col-2-3, .col-8-12 {
    width: 66.66%;
}

.col-1-2, .col-6-12 {
    width: 50%;
}

.col-1-3, .col-4-12 {
    width: 33.33%;
}

.col-1-4, .col-3-12 {
    width: 25%;
}

.col-1-5 {
    width: 20%;
}

.col-1-6, .col-2-12 {
    width: 16.667%;
}

.col-1-7 {
    width: 14.28%;
}

.col-1-8 {
    width: 12.5%;
}

.col-1-9 {
    width: 11.1%;
}

.col-1-10 {
    width: 10%;
}

.col-1-11 {
    width: 9.09%;
}

.col-1-12 {
    width: 8.33%
}

/* Layout Columns */

.col-11-12 {
    width: 91.66%
}

.col-10-12 {
    width: 83.333%;
}

.col-9-12 {
    width: 75%;
}

.col-5-12 {
    width: 41.66%;
}

.col-7-12 {
    width: 58.33%
}



/* Pushing blocks */

.push-2-3, .push-8-12 {
    margin-left: 66.66%;
}

.push-1-2, .push-6-12 {
    margin-left: 50%;
}

.push-1-3, .push-4-12 {
    margin-left: 33.33%;
}

.push-1-4, .push-3-12 {
    margin-left: 25%;
}

.push-1-5 {
    margin-left: 20%;
}

.push-1-6, .push-2-12 {
    margin-left: 16.667%;
}

.push-1-7 {
    margin-left: 14.28%;
}

.push-1-8 {
    margin-left: 12.5%;
}

.push-1-9 {
    margin-left: 11.1%;
}

.push-1-10 {
    margin-left: 10%;
}

.push-1-11 {
    margin-left: 9.09%;
}

.push-1-12 {
    margin-left: 8.33%
}


@media handheld, only screen and (max-width: 767px) {
    .grid {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 20px; /* grid-space to left */
        padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
    }

    [class*='col-'] {
        width: auto;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 0px;
        padding-right: 10px; /* column-space */
    }


    /* Mobile Layout */

    [class*='mobile-col-'] {
        float: left;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        padding-left: 0px;
        padding-right: 10px; /* column-space */
        padding-bottom: 0px;
    }

    .mobile-col-1-1 {
        width: 100%;
    }
    .mobile-col-2-3, .mobile-col-8-12 {
        width: 66.66%;
    }

    .mobile-col-1-2, .mobile-col-6-12 {
        width: 50%;
    }

    .mobile-col-1-3, .mobile-col-4-12 {
        width: 33.33%;
    }

    .mobile-col-1-4, .mobile-col-3-12 {
        width: 25%;
    }

    .mobile-col-1-5 {
        width: 20%;
    }

    .mobile-col-1-6, .mobile-col-2-12 {
        width: 16.667%;
    }

    .mobile-col-1-7 {
        width: 14.28%;
    }

    .mobile-col-1-8 {
        width: 12.5%;
    }

    .mobile-col-1-9 {
        width: 11.1%;
    }

    .mobile-col-1-10 {
        width: 10%;
    }

    .mobile-col-1-11 {
        width: 9.09%;
    }

    .mobile-col-1-12 {
        width: 8.33%
    }

    /* Layout Columns */

    .mobile-col-11-12 {
        width: 91.66%
    }

    .mobile-col-10-12 {
        width: 83.333%;
    }

    .mobile-col-9-12 {
        width: 75%;
    }

    .mobile-col-5-12 {
        width: 41.66%;
    }

    .mobile-col-7-12 {
        width: 58.33%
    }

    .hide-on-mobile {
        display: none !important;
        width: 0;
        height: 0;
    }

这是我为其他所有内容定制的样式表:

body {

}

.nav-cont {
  height: 90px;
  width: 100%;
 position: fixed;  
  background-color: #fff;
  z-index: 9;
}

.navigation {

}



.navigation .grid {

}

.navigation .grid .col-2-12 {
  background-color: black;
  background-image: linear-gradient( black, rgba(255, 255, 255, 0.3) );
  border: 1px solid white;
  text-align: center;

}

.navigation a {
  text-decoration: none;
  color: #F1F1F1;
  font-size: 24px;
  margin: 5px;
  padding: 5px 10px;
}



.intro {

}

.about {

}

}

我确定这是我错过的简单内容，但我似乎找不到它。

最佳答案

当您使用 nav-cont 类将所有内容包装在固定的 div 中时，它会从文档流中删除。您要做的是只固定标题图像，然后添加一个间隔元素(另一个 col-4-12)在文档流中占据一席之地。

我添加的相关CSS:

.navigation .grid > *:first-child {
    position: fixed;
}
.navigation .grid > *:first-child, .navigation .grid > .spacer {
    height: 84px;
}

以及相关的 HTML:

<div class="col-4-12">
    <img src="sblogo.png" alt="logo" height="84" width="88">
</div>
<div class="col-4-12 spacer">
</div>

这是一个有效的 JSFiddle(减小宽度以获得移动 View ):https://jsfiddle.net/tfypuymg/1/

关于html - 我如何中断此页面上的滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32878325/

24 4 0
文章推荐： html - 如何在子 ul 悬停时更改父 li 颜色
文章推荐： css - 如何使用重复框仅在左侧和右侧创建框阴影？
文章推荐： c++ - 按 C++ 键时随时调用函数
文章推荐： javascript - 使用正则表达式我想保留一些特殊字符但删除另一个(竖线)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com