Question

我正在尝试使用固定标头创建模态。这一切都运行良好，但我们已经使用:: - webkit-scrollbar在webkit浏览器中添加了一个自定义滚动条。当我们这样做时，它会导致固定标题比自定义滚动的宽度更宽。

**编辑：这只是调整窗口大小时的问题/当min-width踢入**

时

我的理解是固定标头根据整个窗口计算其最大宽度为90％，模态根据不包括滚动条的可用空间计算90％。

有两种css方法可以解决这个问题。

1）弄清楚我是否只是愚蠢而且有一种方法可以使固定元素取决于相对父母的大小。

2）如果模态的主体或父div具有伪选择器添加样式。

可悲的是，以下情况不起作用：

div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open{
        width:calc(100% - $scrollbarwidth );
}

有什么想法吗？

css：

.modal-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 100;
}

div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open {
  display: none;
}

._common-modal.is-open {
  bottom: 0;
  left: 0;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px 0;
  text-align: center;
  z-index: 101;
}

._common-modal.is-open.header-detached .modal-header {
  position: fixed;
  top: -1px;
  width: inherit;
  max-width: 90%;
}

._common-modal.is-open.header-detached .modal-header:after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(85, 85, 85, 0.05);
}

._common-modal.is-open.header-detached .modal-content {
  margin-top: 50px;
}

._common-modal.is-open:before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

._common-modal.is-open .wkModal {
  text-align: left;
  position: relative;
  max-width: 90%;
  width: 500px;
  z-index: 2;
  background: #ffffff;
  border: 1px solid grey;
  display: inline-block;
  vertical-align: middle;
}

._common-modal.is-open .modal-header {
  border-bottom: 1px solid grey;
  padding: 0 15px;
  line-height: 51px;
  background-color: #fff;
  z-index: 2;
}

._common-modal.is-open .modal-footer {
  padding: 0 15px;
  line-height: 50px;
}

._common-modal.is-open .modal-title {
  font-size: 20px;
  text-align: center;
  font-weight: 300;
  width: 80%;
  margin: 0 auto;
}

._common-modal.is-open .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: block;
  background: url(../img/blue_small-x.svg) no-repeat center center;
}

._common-modal.is-open .modal-content {
  padding: 10px 15px;
}

._common-modal.is-open .modal-content p {
  text-align: center;
}

HTML：

<div class="_common-modal is-open">
        <div class="wkModal">
            <div class="modal-header" >
                <div class="modal-title">
                    <span >Large Modal Custom</span>
                </div><a class="modal-close"
                ></a>
            </div>
            <div class="modal-content" >
                <h1 Test Modal Content</h1>
                <div>
                    **content**
                </div>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>

固定相对容器内的位置（带固定标题的模态）

0 个答案: