代码之家  ›  专栏  ›  技术社区  ›  Mark Denom

如何在不阻塞另一个div的情况下始终将div保持在底部?

flexbox css3 css html javascript
  •  2
  • Mark Denom  · 技术社区  · 7 年前

    所以基本上,我希望这样的东西有3个div,一个在顶部,一个在中间(这是可滚动的,并有一个flex视图),然后底部的那个div显示播放按钮播放幻灯片。

    enter image description here

    但由于某些原因,我的底部栏被卡在页面底部,使整个页面可滚动,这是我不想要的。

    我试着设置一个固定位置的底部酒吧,但后来它掩盖了图片像这样。

    enter image description here

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

    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>
    1 回复  |  直到 7 年前
        1
  •  1
  •   Michael Benjamin William Falcon    7 年前

    设置整个容器的固定高度。你不需要固定的位置。还有其他东西你也可以去掉。查看我的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>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    1 年前
    Alex  ·  在轻量级中同时解构和不解构变量
    1 年前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    1 年前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    1 年前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    1 年前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    1 年前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号