Question

所以本质上，我想要这样的东西：3个div，一个在顶部，一个在中间（可滚动并具有伸缩视图），然后在该div下的底部一个显示播放按钮以播放一个幻灯片。

但是由于某种原因，我的底部栏卡在了页面的底部，使整个页面都可以滚动，这是我所不希望的。

我尝试将底部栏的位置设置为固定，但是这样就掩盖了图片。

这也是一个问题，因为当我向下滚动到底部时，即使我在底部，它也会重叠，底部的条覆盖了图像的底部。

const imageData = [{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},

{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},

{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},

{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},
{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
},

];

function generateTemplate(imageData) {
    return `
    <div class="image-box">
    <p>${imageData.Name}</p>
    <img src="${imageData.Icon}"
    alt="${imageData.Name}"
    style="width:100%"
    onclick="myFunction(this);">
    </div>`
}

document.getElementById("image-container").innerHTML = `
${imageData.map(generateTemplate).join('')}`

body {
    padding: 0;
    margin: 0;
    background: green;
}

#search-div {
    position: fixed;
    height: 55px;
    width: 100%;
    background: #242424;
    z-index: 20;
}

.search-bar {
    border-radius: 50px;
    width: 15%;
    margin-top: 1%;
    margin-left: 42%;
    position: relative
}

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;

}

.music-bar {
    background-color: #242424;
    width: 100%;
    height: 80px;
    position: fixed;
}

.media-controls {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    text-align: center;
    height: 40%;
    top: 10px;
    position: relative;
}

#mediaControlBar {
    background: orange;
    bottom: 0px;
}

.prev-btn {
    font-size: 22px;
    color: rgb(88, 88, 88);
    width: 50%;
    margin-top: 5px;
}

.play-btn {
    color: rgb(88, 88, 88);
    font-size: 28px;
    width: 50%;
}

.play-btn:hover {
    color: rgb(187, 187, 187);
}

.next-btn {
    font-size: 22px;
    color: rgb(88, 88, 88);
    width: 50%;
    margin-top: 5px;

}

#seek-bar {
    width: 50%;
    height: 5px;
    background-color: rgb(78, 78, 78);
    display: flex;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#fill {
    background-color: rgb(129, 129, 129);
    background-color: #FFF;
    border-radius: 20px;
    width: 10%;
}

.image-box {
    width: 300px;
    margin: 20px;
    position: relative;
    vertical-align: top;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    justify-content: center;
    margin-top: 2%;
    text-align: center;
    color: white;
}


.flex-container img {
    opacity: 0.5;
}

.flex-container img:hover {
    opacity: 1;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Images</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
    crossorigin="anonymous">

</head>
<body>

        <div id="search-div">
                <input type="text" class="search-bar" id="searchBar">
            </div>
        
            <div class="container">
                <div class="flex-container" id="image-container">
                </div>
            </div>
        
            <div class="control-bar" id="mediaControlBar">
                <div class="media-controls">
                    <div class="prev-btn">
                        <i class="fas fa-angle-double-left"></i>
                    </div>
                    <div class="play-btn">
                        <i class="fas fa-play"></i>
                    </div>
                    <div class="next-btn">
                        <i class="fas fa-angle-double-right"></i>
                    </div>
                </div>
        
                <div id="seek-bar">
                    <div id="fill"></div>
                    <div id="handle"></div>
                </div>
            </div>

    <script src="/js/data.js"></script>
</body>
</html>

Answer 1

为整个容器设置固定高度。您不需要固定的位置。您还可以删除其他内容。查看我的CSS注释。

const imageData = [{
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },

  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  }, {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },

  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  }, {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },

  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  }, {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },
  {
    "Icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg",
    "Name": "Mona Lisa",
    "Painter": "Picasso",
    "Year": "1786"
  },

];

function generateTemplate(imageData) {
  return `
    <div class="image-box">
    <p>${imageData.Name}</p>
    <img src="${imageData.Icon}"
    alt="${imageData.Name}"
    style="width:100%"
    onclick="myFunction(this);">
    </div>`
}

document.getElementById("image-container").innerHTML = `
${imageData.map(generateTemplate).join('')}`

body {
  padding: 0;
  margin: 0;
  background: green;
    display: flex;             /* new */
    flex-direction: column;    /* new */
    height: 100vh;             /* new */
}

#search-div {
    /* position: fixed; */
    flex: 0 0 55px;            /* adjusted; disabled flex-shrink */
    width: 100%;
    background: #242424;
    /* z-index: 20; */
}

.search-bar {
  border-radius: 50px;
  width: 15%;
  margin-top: 1%;
  margin-left: 42%;
  position: relative
}

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  /* position: relative; */
}

.music-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  position: fixed;
}

.media-controls {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  text-align: center;
  height: 40%;
  top: 10px;
  position: relative;
}

#mediaControlBar {
  background: orange;
  /* bottom: 0px; */
}

.prev-btn {
  font-size: 22px;
  color: rgb(88, 88, 88);
  width: 50%;
  margin-top: 5px;
}

.play-btn {
  color: rgb(88, 88, 88);
  font-size: 28px;
  width: 50%;
}

.play-btn:hover {
  color: rgb(187, 187, 187);
}

.next-btn {
  font-size: 22px;
  color: rgb(88, 88, 88);
  width: 50%;
  margin-top: 5px;
}

#seek-bar {
  width: 50%;
  height: 5px;
  background-color: rgb(78, 78, 78);
  display: flex;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

#fill {
  background-color: rgb(129, 129, 129);
  background-color: #FFF;
  border-radius: 20px;
  width: 10%;
}

.image-box {
  width: 300px;
  margin: 20px;
  position: relative;
  vertical-align: top;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  justify-content: center;
  /* margin-top: 2%; */
  text-align: center;
  color: white;
}

.flex-container img {
  opacity: 0.5;
}

.flex-container img:hover {
  opacity: 1;
}

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet" />
<div id="search-div">
  <input type="text" class="search-bar" id="searchBar">
</div>

<div class="container">
  <div class="flex-container" id="image-container">
  </div>
</div>

<div class="control-bar" id="mediaControlBar">
  <div class="media-controls">
    <div class="prev-btn">
      <i class="fas fa-angle-double-left"></i>
    </div>
    <div class="play-btn">
      <i class="fas fa-play"></i>
    </div>
    <div class="next-btn">
      <i class="fas fa-angle-double-right"></i>
    </div>
  </div>

  <div id="seek-bar">
    <div id="fill"></div>
    <div id="handle"></div>
  </div>
</div>

<script src="/js/data.js"></script>
</body>

</html>

如何始终将div保持在底部，而又不阻止另一个div？

1 个答案: