我是如何在这个页面上打破滚动的？

时间：2015-10-01 01:59:31

标签： html css

我正在建立单页滚动网站，顶部有一个固定的导航栏。这也将是一个响应式网站。列似乎在断点处堆叠得很好。但不知怎的，在我修复了标题后，我打破了滚动功能。用户可以在屏幕上看到的文本如下，因此应该会出现一个滚动条。我甚至尝试将主要内容放在响应网格之外的容器中，并为容器提供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 {

}

}

我确信这是我错过的一些简单的事情，但我似乎无法找到它。

1 个答案:

答案 0 :(得分：0)

当您使用类div将所有内容整理到已修复的nav-cont中时，它已从文档流中删除。你要做的只是修改你的标题图像，然后添加一个间隔元素（另一个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（缩小宽度以获取移动视图）：https://jsfiddle.net/tfypuymg/1/

相关问题
最新问题