Question

我是HTML和CSS的初学者，遇到了问题。

我试图寻找一些解决方案，但仍然无法解决问题。

我的孩子Div（中间div的孩子）无法滚动到底部，如果我向其中添加了更多表格，则最后一个提交按钮不可见。

我不太确定问题的根本原因是什么。

我的div的结构如下：

包装器


标题

midtop


firstQ

谢谢。

这是我的代码的链接：

https://github.com/erictaur/Course-Query/blob/test-branch/InnoServ/Entry.html

https://github.com/erictaur/Course-Query/blob/test-branch/InnoServ/entrycss.css

我的部分代码如下：

.wrapper {
  display: block;
}

#header {
  margin: auto;
  position: relative;
  width: 100%;
  height: 200px;
  background-color: grey;
  transform: translate(-50%, 0%);
  left: 50%;
  top: 0%;
  display: block;
}

#midtop {
  margin: auto;
  position: relative;
  width: 100%;
  transform: translate(-50%, 0%);
  height: 600px;
  left: 50%;
  overflow: auto;
  display: inline-block;
}

#firstQ {
  margin: auto;
  width: 80%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  display: inline-block;
}

<div class="wrapper">

  <div class="header"> #child1
    <p id="Welcome">Welcome!</p>
  </div> #end of header


  <div id="midtop"> #child2

    <div id="firstQ"> #child of midtop
      <form id="top_search">
        <table>
          ...
        </table>
      </form>
      <p class="submit">
        <input type="submit" form="top_search">
      </p>
      <form id="mid_search">
        <table>
          ...
        </table>
      </form>
      <p class="submit">
        <input type="submit" form="mid_search">
      </p> #I cannot see this button if the table is to long
    </div> #end of firstQ
  </div> #end of midtop


</div> #end of wrapper(parent)

The Screenshot of my page looks like this

我尝试在父div中使用绝对定位进行溢出：自动。似乎真的不起作用。

再次感谢！

Answer 1

根据我的评论，您的firstQ div不能绝对定位，否则您的中层div不会获得任何高度，因此滚动无法正常工作。

我将使用flex将firstQ居中，然后应解决您的问题：

.wrapper {
  display: block;
}

#header {
  margin: auto;
  position: relative;
  width: 100%;
  height: 200px;
  background-color: grey;
  transform: translate(-50%, 0%);
  left: 50%;
  top: 0%;
  display: block;
}

#midtop {
  margin: auto;
  position: relative;
  width: 100%;
  transform: translate(-50%, 0%);
  height: 600px;
  left: 50%;
  overflow: auto;
  
  
  display: flex;                         /* change display type */
  flex-direction: column;
  justify-content:center;                /* vertical centring */
}

#firstQ {
  margin: auto;                         /* remove absolute positioning */
  width: 80%;
  display: inline-block;
}

<div class="wrapper">

  <div class="header"> #child1
    <p id="Welcome">Welcome!</p>
  </div> #end of header


  <div id="midtop"> #child2

    <div id="firstQ"> #child of midtop
      <form id="top_search">
        <table>
          ...
        </table>
      </form>
      <p class="submit">
        <input type="submit" form="top_search">
      </p>
      <form id="mid_search">
      bob
        <table>
          ...
        </table>
      </form>
      <p class="submit">
        <input type="submit" form="mid_search">
      </p> #I cannot see this button if the table is to long
    </div> #end of firstQ
  </div> #end of midtop


</div> #end of wrapper(parent)

Answer 2

我已经编辑了代码，现在一切看起来都“正常”，但是我想知道是否有任何方法可以简化我的代码。由于我不太确定我想做的事情需要很多代码行。

如果任何人都可以简化这堆代码，使其更容易理解，那将有很大的帮助。我一直在添加和删除参数，现在我很困惑。

 <div class="wrapper">

     <div class="header"> #child1
     <p id="Welcome">Welcome!</p>
     </div> #end of header


  <div id="midtop"> #child2

    <div id="firstQ"> #child of midtop
      <form id="top_search">
        <table>
          ...
        </table>
      </form>
      <p class="submit">
        <input type="submit" form="top_search">
      </p>
      <form id="mid_search">
      bob
        <table>
          ...
        </table>
      </form>
      <p class="submit">
        <input type="submit" form="mid_search">
      </p> #I cannot see this button if the table is to long
    </div> #end of firstQ
  </div> #end of midtop


</div> #end of wrapper(parent)


code for css:

#midtop{
margin: auto;
position: relative;
width: 100%;
transform: translate(-50%, 0%);
height: 600px;
left: 50%;
overflow: scroll;
display: flex;
flex-direction: column;
/* justify-content: center; */ (Not sure why this shrinks the scrollable area)
}

#firstQ{
margin: auto;
width: 80%;
position: relative;
display: inline-block;
}

我的孩子Div无法滚动到底部

2 个答案: