Question

我对html相对较新。

这是my code的简化版本。

我想要它以便我可以向下滚动以查看页面的其余部分，但我不能这样做。任何帮助都将非常感激。

HTML：

<body>
  <div id="header">
  </div>
  <div id="nav">
  </div>
  <div id="ingredient">
  </div>
  <div id="direction">
  </div>
</body>

Answer 1

问题是所有元素都设置为position: fixed，这使它们与文档流无关。因此，<body>没有高度，您无法滚动。

移除您的position: fixed并为您的元素设置一个静态高度（例如px代替%）。

我已在此处完成了这些调整：https://jsfiddle.net/sgqkkwb5/2/但您仍需要更改其他布局属性才能获得所需的结果。

偏离主题（意见）： 因为你似乎对html和css很新，所以创建你自己的布局对于学习目的是有好处的 - 但是，如果你正在创建某种类型的公共项目，我建议求助于网格系统。请查看http://getbootstrap.com，特别是grid部分。

祝你好运。

Answer 2

尝试将此位置fixed更改为absolute https://jsfiddle.net/aavrug/u59bvt9p/1/

Answer 3

这是您的解决方案Fiddle

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

内容离开我的网页屏幕，溢出不起作用

3 个答案: