【发布时间】：2015-07-11 05:50:26
【问题描述】：
更新 2 我刚刚从下面修复了“编辑 2”，bodySection div 的内容在 navLogo/navElements div 的顶部向上滚动。位置：relative 是罪魁祸首，现在我在 bodySection 类上没有位置（因此，据我所知，默认为静态），它按预期工作。
我仍然认为我的代码中的一些东西有点古怪（更新的小提琴和嵌入下面的代码）。例如，为了让所有东西都按我想要的那样排列，我有一些非常非常奇怪的宽度属性；
left、mid 和 rightSection 都设置为 30% 宽度，因此它们占用了大约 1/3 的可用空间。这很有意义。
bodySection 类的宽度为 98%，左边距为 1%，右边距为 2%。为什么两边不是 100% 的宽度和 1% 的填充？它位于 100% 宽度的“容器”div 内。我认为它会继承父 div 的边界。
.navElements 类的宽度为 95%，如果我将其增加到 100%，它会表现出各种有趣的行为，将文本推离可视屏幕。这是为什么呢？
.navLogo 类的宽度为 100%，甚至 img 也被标记为 100%，但我可以告诉你，你看到的大小并不是实际图像大小的 100%。它是我想要的大小，但不是 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 时还是十几岁的孩子），所以我希望每次在论坛上与人们互动时都能学到很多东西。
【问题讨论】：
-
您好，感谢您的快速回复。我也一直在玩弄这个，但我想我可能还有其他一些问题，因为如果我在之前放置一个标签（理论上，关闭“NavElements” div），bodySection 然后上升到标题中，这显然是我不希望发生的。还能是什么？
-
实际上，进一步审查 - 在 NavElements div 的行尾有一个标记（在这篇文章的 HTML 代码块上一直滚动）。为了便于阅读，我已在源代码中对其进行了清理。