我對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
是的，我想讓頁眉和導航面板在滾動時保持可見 –