我对html比较新。内容熄灭我的网页和溢出不起作用
这是my code的简化版本。
我希望它可以向下滚动以查看页面的其余部分，但我无法做到这一点。任何帮助将非常感激。
HTML：
<body>
<div id="header">
</div>
<div id="nav">
</div>
<div id="ingredient">
</div>
<div id="direction">
</div>
</body>
的问题是，所有的元素都设置为position: fixed这台相互独立，从文档的流动。因此，您的<body>没有高度，您无法滚动。
删除您的position: fixed并为您的元素指定一个静态高度（例如，在px而不是%）。
我已经在这里做了这些调整：https://jsfiddle.net/sgqkkwb5/2/但您仍然需要更改其他布局属性以获得您想要的结果。
题外话（意见）： 因为你似乎很新的HTML和CSS，创建自己的布局有利于学习的目的 - 但是，如果你正在创建某种形式的公益项目我会建议诉诸网格系统。看看http://getbootstrap.com，特别是grid部分。
祝你好运。
非常感谢老兄，非常感谢！ –
好的，芽 – Chris
试试这只是改变了位置fixed到absolutehttps://jsfiddle.net/aavrug/u59bvt9p/1/
这里是你的解决方案Fiddle
#ingredient {
display: inline-block;
float: left;
left: 15%;
position: relative;
top: 70px;
width: 60%;
}
#ingredient ul {
padding: 1em;
margin-left: 0;
list-style: square;
text-decoration: none;
column-count: auto;
list-style-position: inside;
height: 40%;
}
h1 {
padding-top: 1em;
line-height: 0;
}
#direction {
float: left;
left: 15%;
margin-top: 2%;
position: relative;
width: 85%;
}
#video {
position: fixed;
top: 19%;
left: 60%;
}
ol {
padding: 1em;
margin-left: 0;
text-decoration: none;
}
/*Body Styles*/
body {
background-color: white;
padding: 0;
margin: 0;
border: 0;
overflow: auto;
}
/*Header Styles*/
#header {
background-color: #f60000;
border-bottom: thick solid black;
border-bottom-right-radius: 25px;
border-right: thick solid black;
float: left;
height: 15%;
left: 0;
margin: 0;
position: absolute;
top: 0;
width: 50%;
}
/*Navigation Styles*/
#nav {
background-color: #f60000;
border-bottom: thick solid black;
border-bottom-right-radius: 25px;
border-right: thick solid black;
height: 26%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 15%;
width: 12%;
z-index: 1;
}<body>
<div id="header">
</div>
<div id="nav">
</div>
<div id="ingredient">
<h1>Ingredients</h1>
<ul>
<li>2 tablespoons olive oil</li>
<li>3 eggs, beaten</li>
<li>1 tablespoon crumbled goat cheese, or to taste</li>
<li>2 teaspoons chopped chives, divided, or to taste</li>
<li>sea salt and ground black pepper to taste</li>
</ul>
</div>
<div id="direction">
<h1>Directions</h1>
<ol>
<li>Heat olive oil in a large skillet over medium heat, swirling oil
to coat the skillet. Pour eggs into hot skillet; eggs will bubble and
firm immediately.</li>
<li>Lift cooked edges of the omelet with a rubber spatula and tilt the
skillet so that the uncooked egg runs underneath the lifted edge.
Continue cooking, lifting edges and tilting the skillet, until
omelet is almost completely set, 1 to 2 minutes total
cooking time; remove from heat. Spread out any runny egg evenly on
the top of the omelet with a rubber spatula</li>
<li>
Sprinkle goat cheese, 1 1/2 teaspoons chives, sea salt, and black
pepper over omelet. Gently lift one edge and fold 1/3 of the omelet
into the center over the cheese and chives. Fold the opposite 1/3
of the omelet into the center. Slide omelet to
the edge of the skillet and flip, folded side down, onto a plate.
Top with remaining chives.
</li>
</ol>
</div>
</body>
您的所有内容已经给位置：固定的。你只是希望页面滚动时页眉和导航保持可见？ – sol
您正在使用固定在原料和方向ID上的位置。这迫使元素脱离流程（所以在这种情况下溢出auto不起作用）。并且你迫使方向ID离开视口/流程。 我会建议修改您当前的页面结构，并避免使用定位固定。通常，你很少使用固定的反正。 – adamk22
是的，我想让页眉和导航面板在滚动时保持可见 –