CSS - 为什么我的内容不滚动？

时间：2015-07-10 19:31:46

标签： html css css3 web

UPDATE 2 我刚刚从下面修改了“编辑2”，其中bodySection div的内容向上滚动到navLogo / navElements div的顶部。位置：亲戚是那里的罪魁祸首，现在我在bodySection类上没有位置（因此，默认为静态，根据我的理解），它按预期工作。

我仍然认为我的代码中的一些内容有点时髦（下面嵌入了更新的小提琴和代码）。例如，为了让所有内容都符合我的要求，我有一些非常非常奇怪的宽度属性;

left，mid和rightSection都设置为30％宽度，因此它们占用了可用空间的1/3。这很有道理。

bodySection类的宽度为98％，左边填充1％，右边填充2％。为什么不是两侧100％宽度和1％填充？它位于'容器'div内，宽度为100％。我认为它将继承父div的边界。

.navElements类的宽度为95％，如果我将其提高到100％，它会在可视屏幕上播放各种有趣的文本。那是为什么？

.navLogo类的宽度为100％，即使img标记为100％，但我可以告诉您，您看到的大小不是实际图像大小的100％。它 IS 我想要的尺寸，但它不是100％，为什么会这样？

即使在32英寸显示器（我的笔记本电脑的外接显示器）上，我也会看到一个水平滚动条（横跨底部）。显然我不想要这个。为什么会这样？

更新小提琴：Fiddle Here

更新代码：

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Frick Solutions - Technology Consulting for Small Business</title>
    <meta name="keywords" content="HTML,CSS"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="/redesign/css/fricksolutions.css"/>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
  </head>
  <body id="home">
  <div class ="container">

  <div class="navLogo">
  <a href="/index.html"><img src="/redesign/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO%;"> </a> <!-- style="max-width:40%;max-height:3%;"></a> -->

  <div class="navElements" align="right">
  <li> <a href="/why.html">Why Us?</a></li> 
  <li> <a href="/smallbusiness.html">Small Business</a></li> 
  <li><a href="/servers.html"> Servers </a></li> 
  <li><a href="/athome.html"> @Home </a> </li> 
  <li> <a href="/contact.html">Contact</a> </li>
  </div> <!--Close navLogo div -->
</div> <!--Close navElements div -->
<div class = "bodySection">
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>

<div id = "leftSection">
left text test
</div><!-- Close leftSection -->
<div id = "midSection">
mid text test
</div> <!-- Close midSection -->
<div id = "rightSection">
right text test
</div><!-- Close rightSection -->
</div> <!-- Close bodySection -->
</div> <!-- close container -->

  </body>
</html>

CSS：

body {

  color: black;
  font-family: "Roboto", sans-serif;
  background-color: white;
  margin: 0;  /*use this to ensure left most content goes all the way to border of page */
 }





@media screen and (min-width:30em) { /* used to be 600 px */
  .navLogo
  {
  padding-left: 1%;
  padding-right: 1%;
  position: fixed;
  background-color: #373737;
  width: 100%;
  height: 8%;
   }


   .navElements
   {
   padding-right: 1%;
   font-family: "Roboto", sans-serif;
   background-color: transparent;
   position: absolute;
   bottom: 0px;
   width: 95%;
   padding-bottom: .25%;
    }

    .navElements li
    {
    color: white;
    background-color:transparent;
    display: inline-block;
    padding: 5px 10px 0 0;
     }

     .navElements a { text-deocration: none; }
     a:link 
    {
  color: white 

  }
a:visited 
  {
  color: white 
  }
  a:hover
  {
      color: grey;      
  }


 .bodySection{
 padding-left: 1%;
 padding-right: 2%;
 padding-top: 5%;  /*this is here as a hack to make sure the bodySection div shows up under the navLogo/navElement divs*/
 width: 98%; /*
 position: relative;*/
/* overflow: hidden;*/

  }

 #leftSection, #midSection, #rightSection {
 width: 30%;
 min-width: 30%;
 height: 100px;
 border: 1px solid red;
 margin-left: 10px;
 float:left; 
 padding-left: 1%;
 padding-right: 1%;
 padding-top: 1%;
 padding-bottom: 1%;

 }

  .container{
  width: 100%;
  height: auto;
  /*overflow: hidden;*/ }

 }

更新（减去最初更新的小提琴/代码）谢谢大家的帮助（已经不到一个小时了，我已经有了很多好的提示！）。我真的很喜欢这个社区，尽管我很少来这里。我需要改变它！

This is the live version of my redesign - 编辑2，我刚刚意识到我现在所拥有的并没有让我点击我放在顶部导航中的任何链接。我认为这是因为bodySection重叠（使用5％填充），但是很想听听你的想法。

到目前为止，我还没有实施过多的建议，但我知道我会（我只需要根除它们并且可能也会测试它们）。正如你所看到的，我得到了滚动工作，并通过在div上放置5％的顶部填充来解决我的'bodySection'问题，因此它总是会下降到导航下方。不幸的是，一旦你开始滚动，这并不会阻止bodySection div的内容覆盖navElements和navLogo div。

我将删除下面的代码和提示（以避免混淆）并在此处发布我更新的代码/小提琴。

原帖（减去代码和小提琴链接）

所以我是CSS的相对新手（因为你可能能够从我在FIDDLE中附加的css文件中辨别出来），但我正在努力改进它。我专业地进行技术咨询，并希望扩展我的技能/服务以包括网页设计（此外，我希望我自己的网站看起来很棒，而不必付钱！）。

经过一系列的反复试验，我终于让我的顶级导航仪看起来像我想要的那样。

然后我开始玩内容，我想要像3x2表这样的东西来显示图标和文字。我得到它的工作（3x1，现在只是文本），但是在我这样做之后，我决定了需要在标题栏和css表之间有一些东西，所以我想我会抛出一堆虚拟文本并确保滚动按预期进行。我发现的是我根本无法使页面的主体滚动。

我已经做了大量的研究试图解决这个问题，大多数帖子都说'停止使用固定位置'或其他东西到那一点。不幸的是，如果我移除我的固定位置，导航栏会中断，或者它不会保持可见。

简而言之，这就是我要寻找的： 我的导航栏需要100％的时间在屏幕上。我不需要任何疯狂的jQuery在某个滚动点将其弹出到顶部 - 我只是希望它始终存在。

我的内容需要低于导航栏，位于主div（bodySection）中。在bodySection中，我需要能够嵌入我的3x1（或3x2）CSS表，由leftSection，midSection，rightSection组成。

任何提示/提示/技巧来清理我的CSS并在HTML中实现它将非常感激。我完全是自学成才（HTML和CSS - 在90年代中期开始学习HTML作为青少年时期），所以我希望每次与论坛上的人们互动时都能学到很多东西。

5 个答案:

答案 0 :(得分：2)

有很多错误（没有冒犯，我们都必须从某个地方开始）。我将发布代码来修复它，并在几个小时左右的时间内写一些分析以及一些提示。

body {
    color: black;
    font-family:"Roboto", sans-serif;
    background-color: white;
    margin: 0;
    /*use this to ensure left most content goes all the way to border of page */
}
@media screen and (min-width:30em) {
    /* used to be 600 px */
    .navLogo {
        padding-left: 1%;
        padding-right: 1%;
        position: fixed;
        /* max-width: 40%; */
        background-color: #373737;
        width: 100%;
        height: 30px;
    }
    .navElements {
        padding-right: 5%;
        font-family:"Roboto", sans-serif;
        background-color: transparent;
        position: fixed;
        padding-top: 5px;
        padding-left: 25%;
    }
    .navElements li {
        color: white;
        background-color:transparent;
        display: inline-block;
        padding-left: 15px;
    }
    .navElements a {
        text-deocration: none;
    }
    a:link {
        color: white
    }
    a:visited {
        color: white
    }
    a:hover {
        color: grey;
    }
    #bodySection {
        padding-top: 25px;
        padding-left: 1%;
        padding-right: 2%
        width: 98%;
    }
    #leftSection, #midSection, #rightSection {
        width: 30%;
        min-width: 30%;
        height: 100px;
        /* border: 1px solid red; */
        margin-left: 10px;
        float:left;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
        padding-bottom: 1%;
    }
    #container {
        width: 100%;
        height: auto;
    }
}
<body id="home">
  <div class ="container">
    <div class="navLogo">
      <a href="/index.html">
        <img src="/img/FrickSolutionsLogoWhite.png" style="height:100%; width:AUTO%;">
      </a>
    </div>
    <div class="navElements" align="right">
      <li><a href="/why.html">Why Us?</a></li>
      <li><a href="/smallbusiness.html">Small Business</a></li>
      <li><a href="/servers.html"> Servers </a></li>
      <li><a href="/athome.html"> @Home </a></li> 
      <li><a href="/contact.html">Contact</a></li>
    </div>
    <div id = "bodySection">
      
      here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>
here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>here is some text <br>

      
      <div id = "leftSection">
  	    <p>left text test</p>
      </div><!-- Close leftSection -->
      <div id = "midSection">
  	    <p>mid text test</p>
      </div> <!-- Close midSection -->
      <div id = "rightSection">
        right text test
      </div><!-- Close rightSection -->
    </div> <!-- Close bodySection -->
  </div>
</body>

首先，我建议下载一些Web开发工具来帮助您理解问题。我个人使用chrome开发工具（预装了chrome）。右键单击并检查元素，以便为Web开发提供大量工具。

我还建议您阅读W3学校及其庞大的简单示例和教程库。

好的，提示时间：

  1. 不建议使用2个身体标签。
  2. 不建议在身体标签上使用ID。
  3. 建议不要使用，请改用填充属性。
  4. 为了组织目的而轻松删除您的元素 错误发现。

    5. 我注意到的一个更大的错误是理解“位置”属性选项。对于99％的页面，您需要默认的“静态”定位，这会使您的内容相对于您的其他内容。对于导航和对象应该保持在视图中，无论滚动使用“固定”。很少有案例需要使用“绝对”。

    现在与这个网页无关，如果你真的想要一个漂亮的美学并且不想花400小时开发样式表。我强烈建议使用响应式css模板，例如bootstrap。

    对于一个伟大的（我可能有偏见）前端Web开发的例子，我很乐意指向您的简历网站。 http://www.brennen-sprimont.com/。右键单击并检查页面以获取其背后的代码。

    更新1 现在，文本出现在导航栏“上方”。您需要将“bodySection”的z-index编辑为较低或将“navLabel”编辑为较高以获得所需结果。

    更新2 

    @media screen and (min-width: 30em)
.bodySection {
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 5%;
}

    您的总宽度为101％，之前会出现滚动条。当然，3个div当然没有完全居中，这是因为你在父级（bodySection）中填充1％左边，然后在leftSection div上留下10px的边距。

    navElements之所以如此奇怪，是因为它位于navLogo中，它具有基于％的边距，使你达到102％。添加绝对会忽略父div的边距。

答案 1 :(得分：0)

您的容器div在HTML中标记为一个类，但您已将其定义为CSS中的ID。请记住CSS＃是用于ID和。适用于Class

您提供的小提琴无法正确加载，但您可以通过溢出使div内的内容滚动。如果你打算把它作为一个班级，你可以尝试

.container{
width: 100%;
height: auto;
overflow: scroll;
}

答案 2 :(得分：0)

没有2个身体标签可能是一个好主意，就像一个惯例。使用nav元素，您可以只使它们position:fixed; top:0; left:0;。这通常足以使他们在几个问题上坚持到顶端。

您正在使用一类nav-logo将整个内容嵌套在div中，这可能会导致一些问题。我会仔细检查你是否关闭了所有的div，有时很容易错过。

另外，这是一个关于如何使用较新的html5语法来构建网站的大致轮廓，通常我从类似的东西开始并从那里向上移动所以我知道它是正确的

<body> <header> </header> <nav> <ul><li></li></ul> </nav> <section> <article></article> <article></article> <article></article> </section> <footer> </footer> </body>

答案 3 :(得分：0)

好吧认为这是一个免费赠品，你有大量的语法错误和非常难以阅读的代码。请记住，建立您的网站时，白色空间是您的朋友！我稍微清理了一下你的代码，以便更容易理解。这是小提琴http://jsfiddle.net/61q7avrL/3/ 

    body {
    color: black;
    font-family:"Roboto", sans-serif;
    background-color: white;
    margin: 0;
    /*use this to ensure left most content goes all the way to border of page */
}
#container {
     width: 1200px;
     height: 1200px;
}

#bodySection {
        padding-left: 1%;
        padding-right: 2%;
        width: 98%;

}
#leftSection, #midSection, #rightSection {
        width: 30%;
        height: 400px;
        margin-top: 40px;
        border: 1px solid red;
        margin-left: 1%;
        float:left;
        padding: 1%;
}
.navLogo {
        padding-left: 1%;
        padding-right: 1%;
        position: fixed;
        /* max-width: 40%; */
        background-color: #373737;
        width: 100%;
        height: 8%;
}
.navElements {
        padding-right: 1%;
        font-family:"Roboto", sans-serif;
        background-color: transparent;
        position: absolute;
        bottom: 0px;
        width: 95%;
        padding-bottom: .25%;
}
.navElements li {
        color: white;
        background-color:transparent;
        display: inline-block;
}
.navElements a {
        text-deocration: none;
}
a:link {
        color: white
}
a:visited {
        color: white
}
a:hover {
        color: grey;
}


@media screen and (min-width:600px) {
}

和你的css 

[Symfony\Component\Process\Exception\RuntimeException]  
The process has been signaled with signal "11".

答案 4 :(得分：0)

检查这个

@media screen and (min-width: 30em)
.bodySection {
  padding-left: 1%;
  padding-right: 2%;
  padding-top: 5%;
  width: 98%;
  /* position: relative; */
  /* overflow: hidden; */
}

填充左边1％，填充右边2％和宽度98％所以总共101％这个错误，

它需要总计100％。所以只需98％到97％。然后滚动将... ..

http://jsfiddle.net/hznpw2dg/3/演示

相关问题
最新问题