Question

我正在构建一个简单的页面，该页面的一侧具有基于CSS的折叠菜单。该页面的背景是一个三级线性渐变。放入折叠菜单后的某个时候，页面底部显示了一个额外的蓝色带。它位于<footer>部分的下方（下面的html中没有任何内容，除了</body>和</html>标签之外）。（这发生在我的Vivaldi浏览器（Chromium）和Edge中，而不是IceDragon（Firefox）中。）

如果我将鼠标悬停在“ menuItem”上，它将展开，并将渐变的底部向下推向浏览器的底部边缘。（最大的“ menuItem”使其几乎消失。）然后在Edge中，当我停止悬停时，它会恢复蓝色带，而Vivaldi会独自保留它，除非我直接将光标从“ menuItem”移至“我的观点：”位。

这是html：

<body class="bkgdgradient">
<header>
<h1>Page title</h1>
<h3>tagline</h3>
</header>
<div class="layingout">
<div class="menuing">
<h4>My opining:</h4>
  <div class="menuItem">
    <h5>First Menu Category<h5>
    <ul><p style="display: none;"></p>
      <li><a href="#">link item 1</a></li>
      <li><a href="#">link item 2</a></li>
      <li><a href="#">link item 3</a></li>
      <li><a href="#">link item 4</a></li>
    </ul>
  </div>
  <div class="menuItem">
    <h5>Second Menu Category<h5>
    <ul>
      <li><a href="#">link item 1</a></li>
      <li><a href="#">link item 2</a></li>
      <li><a href="#">link item 3</a></li>
    </ul>
  </div>
  <div class="menuItem">
    <h5>Third Menu Category<h5>
    <ul>
      <li><a href="#">link item 1</a></li>
    </ul>
  </div>
  <div class="menuItem">
    <h5>Fourth Menu Category<h5>
    <ul>
      <li><a href="#">link item 1</a></li>
    </ul>
  </div>
  <div class="menuItem">
    <h5>Fifth Menu Category<h5>
    <ul>
      <li><a href="#">link item 1</a></li>
      <li><a href="#">link item 2</a></li>
      <li><a href="#">link item 3</a></li>
    </ul>
  </div>
</div>
<div class="talking">
<p>A bunch of text.</p>
<p>A bunch more text.</p>
<p>Even more text</p>
<p>Finally finished</p>
</div>
</div>
<footer>
<p>About me</p>
<p>Contact me</p>
</footer>
</body>

这是CSS（页面内部）：

.bkgdgradient {
    background-image: linear-gradient(#9cc3d2, #cfc4b8 30%, BurlyWood 95%);
}

header {
    background-image: url("F14 & KC135R.jpg");
    background-size: contain;
    width: 1000px;
    height: 556px;
}

h1 {
    padding-left: 15px;
    padding-top: 10px;
    font-family: "Verdana", "Geneva", sans-serif;
    font-size: 2.75em;
}

h3 {
    text-align: right;
    line-height: 800px;
    padding-right: 30px;
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 1.75em;
}

h4 {
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 1.25em;
}

.layingout {
    display: grid;
    grid-template-columns: 250px 700px;
    grid-gap: 30px;
    padding: 10px;
}

.menuing {
    grid-column-start: 1;
    grid-row-start: 1;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    color: SaddleBrown;
    text-shadow: 1px 0px Sienna;
}

.menuItem {
    padding: 0px;
    margin: 0;
}

.menuItem h5 {
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 1em;
    padding-left: 2px;
    margin:0px;
}

.menuItem h5:hover {
    font-size: 1.1em;
    text-shadow: 2px 0px Sienna;
}

.menuItem ul {
    background-color: Peru;
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 0.9em;
    line-height: 15px;
    display: block;
    list-style-type: none;
    padding-left: 10px;
    overflow: hidden;
    height: 0px;
    margin: 0px;
}

.menuItem li {
    border-bottom: 1px solid Chocolate;
    line-height: 22px;
    padding-left: 5px;
}

.menuItem li a {
    text-decoration: none;
    color: Bisque;
}

.menuItem:hover ul {
  height: auto;
}

.talking {
    grid-column-start: 2;
    grid-row-start: 1;
    padding-top: 10px;
}

在该样式中有什么意外的结果？它与使背景渐变应用于身体有关吗？谢谢。

编辑还有一项：在IceDragon中，菜单项的<div>不会随菜单一起向下扩展；相反，菜单项的<ul>不会向下扩展。似乎可以容纳展开的菜单了。 Edge和Vivaldi会根据需要对其进行扩展以包含其他信息。

编辑修复了PHP关闭标签。

Answer 1

.body{
   min-height: 100%;
}
.layingout {
    display: grid;
    grid-template-columns: 250px 700px;
    grid-gap: 30px;
    padding: 10px;
    margin-bottom: 110px;
}

它可以从底部去除多余的空间

页面底部出现和消失的多余空间

1 个答案: