个人中心
gpt4 book ai didi

html - 将 flex 与位置 :fixed 结合起来

转载 作者：行者123 更新时间：2023-12-02 20:13:33 31 4
gpt4 key购买 nike

我想显示一个模式对话框，但我正在努力将 flex 布局和具有固定位置的对话框组合起来。页眉和页脚需要固定高度；内容部分有滚动条溢出。我在这里选择 flex 布局的原因是标题可以隐藏或高度变化，在这种情况下我希望内容占据所有可用的高度。

但是，如果我有一个带有位置的模态对话框:相对(md-modal)，一切都会完美。

一旦我更改为位置:固定在 md-modal 上，一切都会中断。我没有看到造成这种情况的根本原因。我在这里遇到了规范问题吗？

我将情况封装在 600/400 包装中，只是为了便于查看。

<html>
<head>
<style type="text/css">
html,
body {
  height: 100%;
  margin: 0
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    border:1px solid green;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

}
.md-show {
    visibility: visible;
}
.md-content {
    position: relative;
    color: #000;
    background: #fff;
    border-radius: 3px;
    margin: 0 auto;
}
.md-effect-1 .md-content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
  overflow-y:auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
</style>
</head>
<body>
<a href="javascript:document.getElementById('dialog').classList.add('md-show')">test</a>

<div style="width:600px;height:400px">
<div class="md-modal md-effect-1 center" id="dialog">
    <div class="md-content">
        <div class="box">
          <div class="row header">
            <p><b>header</b>
              <br />
              <br />(sized to content)</p>
          </div>
          <div class="row content">
            <p>
              <b>content</b><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
              <p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
              (fills remaining space)
            </p>
          </div>
          <div class="row footer">
            <p><b>footer</b> (fixed height)</p>
          </div>
        </div>
    </div>
</div>
</div>

</body>
</html>

最佳答案

position:fixed，就像 position:absolute 将元素从文档流中取出一样。就其父级而言，它几乎就像不存在一样。

这意味着它与文档流中的元素在相同的空间上呈现。

absolute 和 fixed 之间的区别在于，绝对定位的元素是相对于其最接近的定位父元素进行定位和调整大小的，而 fixed 的元素相对于最接近的视口(viewport)进行定位和调整大小。

这意味着您想要:在模态容器上使用 position:fixed，该容器应该具有视口(viewport)的大小。该容器是不可见的(透明的)并且包含实际的模态。您可以使用选择的居中技术，但我建议使用 

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

我强烈建议不要使用绝对居中方法，例如 transform:translate(-50%, -50%)，因为当模态结果高于视口(viewport)时，它们会严重失败(您失去访问顶部的能力)。

也就是说，这是一个非常基本的模态示例:

document.querySelector('#showModal').addEventListener('click', function(){
  document.querySelector('.modal-container').classList.add('open');
})
document.querySelector('#hideModal').addEventListener('click', function(e){
  e.preventDefault();
  document.querySelector('.modal-container').classList.remove('open');
})
.modal-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-background {
  background-color: rgba(0,0,0,.42);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.modal {
  position: relative;
  background-color: white;
  display: flex;
  width: 900px;
  min-height: 80vh;
  flex-direction: column;
}
#hideModal {
  position: absolute;
  top: 1em;
  right: 1em;
}
.open.modal-container {
  display: flex;
}
.modal > * {
  flex-grow: 0;
  padding: 0 1rem;
}
.modal-body {
  flex-grow: 1;
}
.modal-head, .modal-footer {
  background-color: #eee;
}
.modal-footer {
  padding: 1rem;
}
@media (max-width: 1200px) {
  .modal {
     width: 600px;
  }
}
@media (max-width: 767px) {
  .modal {
     width: 90vw;
  }
}
<div class="modal-container">
  <div class="modal-background"></div>
  <div class="modal">
    <a id="hideModal" href>Hide modal</a>
    <div class="modal-head">
      
      <h1>Modal title</h1>
    </div>
    <div class="modal-body">
      This is the modal body
    </div>
    <div class="modal-footer">
      This is the modal footer
    </div>
  </div>
</div>

<button id="showModal">Show modal</button>

大多数人选择使用已经完善且经过充分测试的模态插件。此外，大多数流行的框架都带有自己已定义且可供使用的模式。

当然，构建您自己的动画可以完全自由地控制打开和关闭动画及其任何可重用功能。

以下是标记的快速修复:

html,
body {
  height: 100%;
  margin: 0
}

.md-modal {
  position: fixed;
  min-height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  border: 1px solid green;
  z-index: 0;
  visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: rgba(0,0,0,.35);
  height: 100%;
  overflow: auto;
}

.md-show {
  visibility: visible;
}

.md-content {
  color: #000;
  background: #fff;
  border-radius: 3px;
  margin: 5vw auto;
  width: 90vw;
  min-height: calc(100vh - 10vw);
  display: flex;
}

.md-content>* {
  flex-grow: 0;
  flex-shrink: 0;
}

.md-effect-1 .md-content {
  transform: scale(0.7);
  opacity: 0.2;
  transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
  transform: scale(1);
  opacity: 1;
}

.box {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 0 auto;
}

.box .row.content {
  flex: 0 1 auto;
  overflow-y: auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

.md-content .box .content {
  flex-grow: 1;
}
<a href="javascript:document.getElementById('dialog').classList.add('md-show')">test</a>

<div class="md-modal md-effect-1 center" id="dialog">
  <div class="md-content">
    <div class="box">
      <div class="row header">
        <p><b>header</b>
          <br />
          <br />(sized to content)</p>
      </div>
      <div class="row content">
        <p>
          <b>content</b>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          (fills remaining space)
      </div>
      <div class="row footer">
        <p><b>footer</b> (fixed height)</p>
      </div>
    </div>
  </div>
</div>

关于html - 将 flex 与位置 :fixed 结合起来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52937784/

31 4 0
文章推荐： CKAN扩展相互覆盖，正确的顺序是什么？
文章推荐： javascript - 如何用 JavaScript 创建类似 Twitter 的提要时钟
文章推荐： Javascript 在 html 页面上创建新行？
文章推荐： vuejs2 - BootstrapVue 表不显示数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com